GermanWikipedia - /page/entry.mu

<!DOCTYPE html>

<title>Scalable Vector Graphics</title>

</head>

<h1 id="firstHeading" class="firstHeading mw-first-heading">Scalable Vector Graphics</h1>

</header>

</div>

<th colspan="2">Scalable Vector Graphics

</th></tr>

<tr>

</td></tr>

<tr>

<td style="white-space: nowrap;"><a href="Dateinamenserweiterung" title="Dateinamenserweiterung">Dateiendung</a>:

</td>

</td></tr>

<tr>

<td style="white-space:nowrap;"><a href="Internet_Media_Type" title="Internet Media Type">MIME-Type</a>:

</td>

<td><code style="margin:0.2em 0; padding:0;">image/svg+xml</code><a href="#cite_note-1">[1]</a>

</td></tr>

<tr>

<td style="white-space: nowrap;">Entwickelt von:

</td>

<td><a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">World Wide Web Consortium</a>

</td></tr>

<tr>

<td style="white-space: nowrap;">Art:

</td>

<td><a href="Vektorgrafik" title="Vektorgrafik">vector image format</a>

</td></tr>

<tr>

<td style="white-space: nowrap;">Erweitert von:

</td>

</td></tr>

<tr>

<td colspan="2" class="hintergrundfarbe5" style="text-align:center;"><a rel="nofollow" class="external text" href="https://www.w3.org/TR/SVG11/">SVG 1.1</a> <a rel="nofollow" class="external text" href="https://www.w3.org/TR/2008/REC-SVGTiny12-20081222/">SVG 1.2 Tiny (Mobile)</a> <a rel="nofollow" class="external text" href="https://www.w3.org/TR/SVG2/">SVG 2</a> (draft)

</td></tr>

<tr>

</td></tr>

<tr>

</td></tr></tbody></table>

Scalable Vector Graphics (kurz auch SVG, <a href="Englische_Sprache" title="Englische Sprache">englisch</a> für skalierbare Vektorgrafik) ist die vom <a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">World Wide Web Consortium</a> (W3C) empfohlene <a href="Spezifikation" title="Spezifikation">Spezifikation</a> zur Beschreibung zweidimensionaler <a href="Vektorgrafik" title="Vektorgrafik">Vektorgrafiken</a>. SVG, das auf <a href="Extensible_Markup_Language" title="Extensible Markup Language">XML</a> basiert, wurde erstmals im September 2001 veröffentlicht. Praktisch alle relevanten <a href="Webbrowser" title="Webbrowser">Webbrowser</a> können einen Großteil des Sprachumfangs darstellen.<a href="#cite_note-2">[2]</a>

Wesentlicher Vorteil des vektor-basierten SVG-Formates gegenüber anderen <a href="Grafikformat" title="Grafikformat">Grafikformaten</a> wie <a href="JPEG" title="JPEG">JPG</a>, <a href="Portable_Network_Graphics" title="Portable Network Graphics">PNG</a> oder <a href="Tagged_Image_File_Format" title="Tagged Image File Format">TIFF</a> ist – insbesondere im <a href="Responsive_Webdesign" title="Responsive Webdesign">Responsiven Webdesign</a> – die <a href="Skalierbarkeit" title="Skalierbarkeit">Skalierbarkeit</a> ohne Qualitätsverlust,<a href="#cite_note-3">[3]</a> gegenüber der prinzipbedingt verlustbehafteten Skalierbarkeit von pixel-basierten <a href="Rastergrafik" title="Rastergrafik">Raster-Grafiken</a>.

<a href="Animation" title="Animation">Animationen</a> werden von SVG mittels <a href="Synchronized_Multimedia_Integration_Language" title="Synchronized Multimedia Integration Language">SMIL</a> unterstützt. Manipulationen des SVG-<a href="Document_Object_Model" title="Document Object Model">DOM</a> sind mit Hilfe eingebetteter Funktionen via <a href="Skriptsprache" title="Skriptsprache">Skriptsprachen</a> möglich. Da SVG ein XML-basiertes Dateiformat ist, sind Inhalte von SVG-Dateien für <a href="Computerunterst%C3%BCtzte_%C3%9Cbersetzung" title="Computerunterstützte Übersetzung">computerunterstützte Übersetzung</a> und andere Weiterverarbeitungen leicht zugänglich. Sie können direkt mit einem <a href="Texteditor" title="Texteditor">Texteditor</a> erstellt werden oder sind die Ausgabe von Programmen mit andersartigem Input, siehe etwa <a href="Gnuplot" title="Gnuplot">Gnuplot</a>. SVG-Editoren erlauben eine bequeme Bearbeitung in der graphischen Ansicht.

Die empfohlene <a href="Dateiendung" class="mw-redirect" title="Dateiendung">Dateiendung</a> ist .svg oder, wenn die Datei mit <a href="Gzip" title="Gzip">gzip</a> komprimiert ist, .svgz. Der <a href="Internet_Media_Type" title="Internet Media Type">MIME-Typ</a> ist <code>image/svg+xml</code>.<a href="#cite_note-4">[4]</a>

<div class="mw-heading mw-heading2"><h2 id="Geschichte">Geschichte</h2></div>

1998 wurden zwei <a href="Computersprache#Beschreibungssprachen" title="Computersprache">Sprachen</a> beim <a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">World Wide Web Consortium</a> (W3C) zur Standardisierung eingereicht:

<ul><li><a href="Vector_Markup_Language" title="Vector Markup Language">Vector Markup Language</a> (VML) von <a href="Microsoft" title="Microsoft">Microsoft</a> und <a href="Macromedia" title="Macromedia">Macromedia</a>.</li>

<li><a href="Precision_Graphics_Markup_Language" title="Precision Graphics Markup Language">Precision Graphics Markup Language</a> (PGML) von <a href="Adobe_Inc." title="Adobe Inc.">Adobe</a>, <a href="IBM" title="IBM">IBM</a>, <a href="Netscape_Communications" title="Netscape Communications">Netscape</a> und <a href="Sun_Microsystems" title="Sun Microsystems">Sun</a>.</li></ul>

Das W3C übernahm aber keine der beiden Sprachen als Empfehlung, sondern vereinigte sie und entwickelte sie unter eigener Regie weiter.

Gründe für die Entwicklung einer neuen Sprache sind unter anderem einer detaillierten Anforderungsliste im ersten Arbeitsentwurf zu entnehmen.<a href="#cite_note-5">[5]</a>

Am 4. September 2001 veröffentlichte das W3C unter dem Namen Scalable Vector Graphics (SVG) 1.0 Specification die erste Empfehlung (englisch recommendation).<a href="#cite_note-6">[6]</a>

Diese Empfehlung wurde von Teilen der <a href="Informationstechnik" title="Informationstechnik">IT</a>-Industrie als Standard akzeptiert. <a href="Microsoft" title="Microsoft">Microsoft</a> folgte dem längere Zeit nicht und unterstützte in seinen Anwendungen nur die Vektorsprache <a href="Vector_Markup_Language" title="Vector Markup Language">VML</a>. Die erste Version des <a href="Internet_Explorer" title="Internet Explorer">Internet Explorers</a>, die SVG nativ unterstützt, ist Version 9.<a href="#cite_note-7">[7]</a>

Ab dem Internet Explorer 10 unterstützt Microsoft VML nicht mehr.

Bereits am 3. August 2001 wurde ein erster Arbeitsentwurf für eine Modularisierung von SVG veröffentlicht, um für mobile Geräte mit geringerem Leistungsumfang dafür geeignete Teile von SVG als Empfehlung zugänglich zu machen.<a href="#cite_note-8">[8]</a>

Dies führte dann letztlich zu Version 1.1 mit drei Profilen, 'Tiny' für Geräte mit geringer Leistung, 'Basic' für Geräte mit etwas höherem Leistungsumfang und 'Full', das den vollen Funktionsumfang von SVG 1.0 umfasst.

Einmal abgesehen von Korrekturen von bekannten Fehlern deckt sich SVG Full 1.1 von den Funktionen und Merkmalen her mit SVG 1.0.

Am 14. Januar 2003 wurden die Empfehlungen zu SVG 1.1 und SVG Mobile veröffentlicht.<a href="#cite_note-9">[9]</a><a href="#cite_note-10">[10]</a>

Diese Empfehlungen wurden danach noch überarbeitet. Die letzte Bearbeitung der mobilen Variante stammt von 2009. Für SVG 1.1 gibt es eine zweite Bearbeitung vom 16. August 2011.<a href="#cite_note-11">[11]</a>

Zunächst wurde geplant, SVG 1.1 mit der Version 1.2 zu erweitern. Dies wurde allerdings primär von Anbietern mobiler Geräte mit Interesse aufgenommen, während die Anbieter von Darstellungsprogrammen für Rechner sich erst einmal auf die Implementierung von SVG 1.1 konzentriert haben.

Dadurch ist das Profil für SVG Full 1.2 nicht über einen Arbeitsentwurf hinaus gelangt.<a href="#cite_note-12">[12]</a>

An der mobilen Version von SVG 1.2 wurde allerdings weitergearbeitet. Inzwischen war bei mobilen Geräten auch eine deutliche Steigerung des Leistungsumfanges eingetreten, weswegen man sich auf ein Profil für den mobilen Markt beschränkt hat. Am 22. Dezember 2008 wurde dann für diese Version eine Empfehlung für ein Tiny-Profil veröffentlicht.<a href="#cite_note-13">[13]</a> Gegenüber 1.1 führt dies einige neue Merkmale und Funktionen ein, etwa von <a href="Synchronized_Multimedia_Integration_Language" title="Synchronized Multimedia Integration Language">SMIL</a> übernommene Elemente für Audio, Video und der Einbettung von anderen SVG-Dokumenten, das deklarative Entfernen von Elementen aus dem Dokument-Objekt-Modell, neue Erweiterungen für den Zugriff von Skripten auf das Dokument-Objekt-Modell, eingeschränkte Transformationen, Mal-Dienste für Farbe, die Möglichkeit eine Hintergrundfarbe für den Malbereich anzugeben, automatischer Textumbruch, Möglichkeit für interaktive Texteingabe und Änderung von Text. Außerdem ist es gelungen, in dieser Version einige Unklarheiten und Unstimmigkeiten hinsichtlich der deklarativen Animation zu beheben, was zum großen Teil dann auch in die zweite Bearbeitung von SVG 1.1 als Fehlerberichtigung übernommen wurde.

Derzeit aktuelle Spezifikationen sind also die Version SVG Tiny 1.2 und die zweite Bearbeitung von SVG 1.1. Seit 2011 wird an SVG 2 gearbeitet, das zahlreiche Änderungen und Erweiterungen enthalten sollte.<a href="#cite_note-14">[14]</a><a href="#cite_note-15">[15]</a>

Seit 15. September 2016 existiert eine Candidate Recommendation. Zum 7. August und 4. Oktober 2018 sind weitere Candidate Recommendations erschienen.<a href="#cite_note-16">[16]</a> Inzwischen wurden zahlreiche geplante Neuerungen und Erfordernisse für die Version 2 wieder gestrichen.

<div class="mw-heading mw-heading2"><h2 id="Dokument">Dokument</h2></div>

Als XML-Dokument wird eine SVG in einer Baumstruktur aus verschiedenen Elementen und diesen Elementen zugewiesenen Attributen aufgebaut. Eine SVG-Datei kann, wie bei XML-basierten Sprachen üblich, mit der <a href="XML-Deklaration" title="XML-Deklaration">XML-Deklaration</a> beginnen. Darauf können Verarbeitungsanweisungen folgen, etwa solche zur Referenzierung externer Stilvorlagen.

Von der Angabe der <a href="Dokumenttypdeklaration" class="mw-redirect" title="Dokumenttypdeklaration">Dokumenttypdeklaration</a> wird einerseits abgeraten,<a href="#cite_note-17">[17]</a> andererseits wird sie für ein korrektes Dokument als erforderlich angesehen.<a href="#cite_note-18">[18]</a>

Möglich und bei SVG seit den Anfängen üblich ist es, Abkürzungen in Form von Entitäten in der internen Dokumenttypdeklaration zu notieren, um so die Dateigröße reduzieren zu können. Die Empfehlungen enthalten ab Version 1.0 entsprechende Beispiele.<a href="#cite_note-19">[19]</a>

Auf diesen Kopfbereich folgt, wie bei allen XML-Dokumenten, das Wurzelelement; für SVG-Dokumente hat dieses den Namen svg.

Um das Element und seinen Inhalt eindeutig dem SVG-Namensraum zuzuordnen und ihm so eine definierte Bedeutung zu geben, die mit den SVG-Empfehlungen zu tun hat, wird der <a href="Namensraum" title="Namensraum">Namensraum</a> beim Wurzelelement mit der XML-Attributkonstruktion xmlns notiert.

xmlns:xlink="http://www.w3.org/1999/xlink"

version="1.1" baseProfile="full"

width="800mm" height="600mm"

viewBox="-400 -300 800 600">

<title>Titel der Datei</title>

<desc>Beschreibung/Textalternative zum Inhalt.</desc>

</svg>

</pre></div>

Mit den Attributen <code>width</code> (<a href="Englische_Sprache" title="Englische Sprache">englisch</a>: Breite) und <code>height</code> (englisch: Höhe) des SVG-Elementes svg wird die Größe der Grafik definiert.

Werden diese Attribute nicht gesetzt, wird die Größe impliziert, jeweils entsprechend einem Attributwert von <code>100%</code> für <code>width</code> und <code>height</code>, was 100 % der Höhe und Breite des verfügbaren Anzeigebereiches entspricht. Mit dem Attribut <code>viewBox</code> kann angegeben werden, welcher Bereich der Zeichenebene im Anzeigebereich dargestellt werden soll. Gegebenenfalls erfolgt also eine Transformation dieses Bereiches hin zum Anzeigebereich. Wird das Attribut nicht angegeben, deckt sich der Bereich mit dem Anzeigebereich, es findet also keine Transformation statt.

Weil dem Autor die Größe des Anzeigebereiches nicht bekannt ist, ist die Verwendung von <code>viewBox</code> allgemein zu empfehlen, insbesondere wenn für <code>width</code> und <code>height</code> keine Angaben oder solche in Prozent notiert sind.

<div class="mw-heading mw-heading3"><h3 id="Koordinatensystem_und_-angabe">Koordinatensystem und -angabe</h3></div>

Das anfängliche <a href="Koordinatensystem" title="Koordinatensystem">Koordinatensystem</a> hat seinen Koordinatenursprung in der linken oberen Ecke des Zeichenbereichs. Es handelt sich dabei um ein internes, <a href="Dimensionslose_Gr%C3%B6%C3%9Fe" title="Dimensionslose Größe">dimensionsloses</a> Koordinatensystem, bei dem die X-Achse nach rechts und die Y-Achse nach unten weist. Dieses Koordinatensystem wird durch die Attribute <code>width</code> (Breite) und <code>height</code> (Höhe) für die Ausgabe dimensioniert. Durch Verwendung des Attributes <code>viewBox</code> und bei den meisten Nachfahren des Wurzelelementes auch durch Verwendung des Attributes <code>transform</code> ergibt sich ein vom anfänglichen Koordinatensystem abweichendes aktuelles Koordinatensystem.

Alle relativen und absoluten Längenangaben innerhalb der Grafik werden auf dieses aktuelle Koordinatensystem bezogen.<a href="#cite_note-coord-20">[20]</a> Als Einheiten können in der Vollversion von SVG sowohl relative (wie <a href="Em_(Schriftsatz)" title="Em (Schriftsatz)">em</a> oder Prozent) als auch absolute Angaben (wie <a href="Meter" title="Meter">Meter</a> oder <a href="Zoll_(Einheit)" title="Zoll (Einheit)">Zoll</a>) gewählt werden. Dafür stehen in SVG die von der Stilvorlagen-Sprache <a href="Cascading_Style_Sheets" title="Cascading Style Sheets">Cascading Style Sheets</a> bekannten Einheiten<a href="#cite_note-einh-21">[21]</a> zur Verfügung.

Bei den tiny-Versionen werden im Inhalt hingegen nur dimensionslose Längen verwendet. Lediglich für <code>width</code> und <code>height</code> des Wurzelelementes sind wie in der Vollversion Einheiten zulässig.

Dieses Vorgehen ist allgemein für SVG-Dokumente auch in der Vollversion sinnvoll, weil so fehleranfällige Umrechnungen von Einheiten vermieden werden.

Im Gegensatz zu den <a href="Integer_(Datentyp)" title="Integer (Datentyp)">ganzzahligen</a> Pixelkoordinaten bei <a href="Rastergrafik" title="Rastergrafik">Rastergrafiken</a> (z. B. <a href="JPEG" title="JPEG">JPEG</a>, <a href="Portable_Network_Graphics" title="Portable Network Graphics">PNG</a>, <a href="Windows_Bitmap" title="Windows Bitmap">BMP</a>) sind SVG-<a href="Koordinate" class="mw-redirect" title="Koordinate">Koordinaten</a> <a href="Gleitkommazahl" title="Gleitkommazahl">Gleitkommazahlen</a>. Pixel-Angaben in Rastergrafiken hingegen haben eine beschränkte Auflösung, sind sie doch in ihrem Wertebereich auf ganze Zahlen sowie die Abmessungen des Bildes beschränkt – entsprechend der Natur der Pixel, die ja kleine, gleich große, unifarbene Rechtecke sind. Bei rasterbasierten Ausgabemedien – zum Beispiel einem <a href="Bildschirm" title="Bildschirm">Monitor</a> – bezeichnet eine SVG-Angabe wie <code>(x = '100' y = '200')</code> nicht das ganze <a href="Pixel" title="Pixel">Bildschirmpixel</a>, sondern dessen obere linke Ecke (oder eine der anderen Ecken der entsprechenden Nachbarpixel). Vorausgesetzt bei diesem Beispiel ist, dass die <a href="Skalierung_(Computergrafik)" title="Skalierung (Computergrafik)">Skalierung</a> des SVG-Dokuments passend gewählt ist.

<div class="mw-heading mw-heading3"><h3 id="Elemente">Elemente</h3></div>

SVG hat unterschiedliche Typen von Elementen:

<ul><li>Elemente mit grafischer Präsentation, aufgebaut aus grafischen Primitiven</li>

<li><a href="Text" title="Text">Text</a> in einer bestimmten <a href="Schriftart" title="Schriftart">Schriftart</a>, die dem <a href="Rasterung" title="Rasterung">Render</a>-Programm zur Verfügung stehen muss.</li>

<li>Gruppierungselemente einerseits für darzustellende Elemente, aber auch als Vorrat zur Referenzierung durch andere Elemente</li>

<li>Elemente zur Bereitstellung von Textalternativen und <a href="Metainformation" class="mw-redirect" title="Metainformation">Metainformationen</a></li>

<li>Elemente zur Bereitstellung von Maldiensten wie Farben, Farbverläufen und Mustern, auch von Markierungen, Masken oder Filtern</li>

<li>Elemente zur Animation</li>

<li>Elemente zur Aufnahme von anderen Sprachstrukturen (Stilvorlagen, Skripte, darstellbare Fragmente aus anderen Namensräumen)</li>

<li>Elemente zur Einbettung externer Dokumente (<a href="Vektorgrafik" title="Vektorgrafik">Vektorgrafiken</a> oder auch <a href="Rastergrafik" title="Rastergrafik">Rastergrafik</a>), interner und externer Dokumentfragmente</li>

<li>Elemente zur Definition von Schriftarten und alternativen Darstellungen von Glyphen</li></ul>

<div class="mw-heading mw-heading4"><h4 id="Grafische_Elemente">Grafische Elemente</h4></div>

Alle grafischen Elemente in SVG bauen auf einfachen Grundelementen, sogenannten <a href="Grafisches_Primitiv" title="Grafisches Primitiv">grafischen Primitiven</a> auf. Durch Kombination mehrerer grafischer Primitive lassen sich komplexe Objekte erzeugen. Für alle grafischen Elemente gibt es festlegbare Eigenschaften (Attribute). Insbesondere

<ul><li>Fill-Attribute – legen die Darstellung der Fläche fest.</li>

<li>Stroke-Attribute – legen die Darstellung der Rahmenlinie fest.</li>

<li>Opacity-Attribute – legen die <a href="Transparenz_(Computergrafik)" title="Transparenz (Computergrafik)">Transparenz</a> des Elements fest.</li>

<li>Marker – legen fest, ob ein Linienende besonders gestaltet wird (z. B. Pfeile, Querstriche etc.)</li></ul>

Die meisten Eigenschaften können auch mittels CSS in einem Style-Attribut festgelegt werden, was offiziell favorisiert wird.

Die in SVG verfügbaren grafischen Elemente sind der Pfad und mehrere, der Vereinfachung dienende Elemente.

Der <a href="Pfad_(Computergrafik)" title="Pfad (Computergrafik)">Pfad</a> ist das grundlegende Element für die Darstellung. Er ist das mächtigste Grafikelement in SVG. Praktisch alles, was durch andere Grafikelemente gezeichnet werden kann, kann durch ein Pfad-Element äquivalent dargestellt werden, denn hier kann man mit einer Sequenz von Kommandos angeben, was dargestellt werden soll. Dafür dient das Attribut <code>d</code>. Jedes Kommando beginnt an der Endposition des vorherigen Kommandos. Es wird durch einen Buchstaben eingeleitet, dem ein oder mehrere Zahlen (Parameter, meist Koordinaten) folgen. Ein Großbuchstabe bewirkt, dass Koordinatenwerte absolut interpretiert werden, ein Kleinbuchstabe, dass sie relativ zur aktuellen Zeichenposition interpretiert werden. Es gibt folgende Kommandos:

<th>Kommando

</th>

<th>Bezeichnung

</th>

<th>Parameter

</th>

<th>Wirkung

</th></tr>

<tr>

<td>ein Koordinatenpaar</td>

<td>Bewegt den virtuellen Stift an die angegebene Position, ohne etwas zu zeichnen.<a href="#cite_note-22">[Anm 1]</a>

</td></tr>

<tr>

<td>ein oder mehrere Koordinatenpaare</td>

<td>Zeichnet eine gerade Linie zur angegebenen Position. Mehrere Koordinaten bewirken einen Polygonzug.

</td></tr>

<tr>

<td>horizontal line</td>

<td>eine X-Koordinate</td>

<td>Zeichnet eine gerade Linie parallel zur x-Achse zur angegebenen Position.

</td></tr>

<tr>

<td>vertical line</td>

<td>eine Y-Koordinate</td>

<td>Zeichnet eine gerade Linie parallel zur y-Achse zur angegebenen Position.

</td></tr>

<tr>

<td>close path</td>

<td>keine</td>

<td>zeichnet eine Gerade zum Ausgangspunkt (letzter Move-Befehl) des Pfades und schließt ihn.

</td></tr>

<tr>

<td>(elliptic) arc</td>

<td>

Zeichnet einen Ellipsenbogen mit den Radien <code>rx</code> und <code>ry</code> sowie der Achsenausrichtung <code>phi</code> zur Position <code>x</code>;<code>y</code>. Hierbei ist <code>lf</code> das "long bow flag" welches festlegt, ob der kurze oder der lange Bogen gezeichnet werden soll, und <code>sf</code> ist das "sweep flag", welches festlegt, ob der Bogen Rechts- oder Linkskrümmung hat. Bei <code>rx=ry</code> entsteht ein Kreisbogen und <code>phi</code> ist bedeutungslos.<a href="#cite_note-23">[Anm 2]</a>

<table>

<td>

</td>

<td style="line-height:120%; width:200px;">Vier Möglichkeiten, einen Bogen vom gelben zum anderen Punkt zu zeichnen:

<li>schwarz: lf = 1, sf = 1</li></ul>

</td></tr></tbody></table>

</td></tr>

<tr>

<td>quadratic Bézier</td>

<td>gerade Anzahl Koordinatenpaare</td>

<td>Zeichnet eine quadratische <a href="B%C3%A9zierkurve" title="Bézierkurve">Bézierkurve</a>, also mit einem Koordinatenpaar als Kontrollpunkt. Das zweite Koordinatenpaar ist der Endpunkt der Kurve.

</td></tr>

<tr>

<td>smooth quadratic Bézier</td>

<td>ein oder mehr Koordinatenpaare</td>

<td>Zeichnet eine quadratische Bézierkurve, wobei der Kontrollpunkt die <a href="Punktspiegelung" class="mw-redirect" title="Punktspiegelung">Punktspiegelung</a> des Kontrollpunkts der unmittelbar davor gezeichneten quadratischen Bézierkurve am aktuellen Endpunkt ist. Angegeben wird jeweils nur der Endpunkt der Kurve.

</td></tr>

<tr>

<td>cubic Bézier</td>

<td>durch drei teilbare Anzahl Koordinatenpaare</td>

<td>Zeichnet eine kubische Bézierkurve. Angegeben wird jeweils der erste und zweite Kontrollpunkt und der Endpunkt der Kurve.

</td></tr>

<tr>

<td>smooth cubic Bézier</td>

<td>gerade Anzahl Koordinatenpaare</td>

<td>Zeichnet eine kubische Bézierkurve, wobei der erste Kontrollpunkt die Punktspiegelung des zweiten Kontrollpunkts der unmittelbar davor gezeichneten kubischen Bézierkurve am aktuellen Endpunkt ist. Angegeben wird jeweils nur der zweite Kontrollpunkt und der Endpunkt der Kurve.

</td></tr>

<tr>

<td>Catmull-Rom</td>

<td>zwei oder mehr Koordinatenpaare</td>

<td>Zeichnet vom aktuellen Punkt aus einen <a href="Kubisch_Hermitescher_Spline#Catmull-Rom-Spline" title="Kubisch Hermitescher Spline">Catmull-Rom-Spline</a>. Die angegebenen Punkte werden also automatisch mit einer glatten Kurve verbunden, wozu anders als bei C und S keine Kontrollpunkte verwendet werden.<a href="#cite_note-24">[Anm 3]</a>

</td></tr>

<tr>

<td>bearing</td>

<td>ein oder mehrere Winkelangaben</td>

<td>Die Orientierung der folgenden Pfaddaten wird um den angegebenen Winkel gedreht. Legt ein Winkelmaß in Grad fest. Bei mehreren angegebenen Winkeln wird die Orientierung aus der Summe aller Winkel bestimmt.<a href="#cite_note-25">[Anm 4]</a>

</td></tr></tbody></table>

<li id="cite_note-22"><a href="#cite_ref-22">↑</a> Die Angabe mehrerer Koordinatenpaare bewirkt einen Polygonzug, was aber als unsauberer Programmierstil gilt, weil nicht alle Renderer bei einem nachfolgenden Z-Kommando den Pfad richtig schließen.

</li>

<li id="cite_note-23"><a href="#cite_ref-23">↑</a> Achtung: Wird ein Zielpunkt angegeben, welcher vom aktuellen Punkt aus mit dem beschriebenen Bogen nicht erreicht werden kann, weil er zum Beispiel weiter weg liegt als der Durchmesser des Kreisbogens, so sollte es zu automatischen Anpassungen durch den Parser kommen, was aber nicht immer regelkonform geschieht.

</li>

<li id="cite_note-24"><a href="#cite_ref-24">↑</a> Vorschlag für SVG 2.0, siehe <a rel="nofollow" class="external text" href="https://www.w3.org/TR/2015/WD-SVG2-20150409/paths.html#PathDataCatmullRomCommand">Arbeitsentwurf vom 09. April 2015</a>, wurde allerdings in nächsten Arbeitsentwurf wieder gestrichen.

</li>

<li id="cite_note-25"><a href="#cite_ref-25">↑</a> Vorschlag für SVG 2.0, siehe <a rel="nofollow" class="external text" href="https://www.w3.org/TR/2016/CR-SVG2-20160915/paths.html#PathDataBearingCommands">Empfehlungskandidaten vom 2016-09-015</a>, wurde allerdings aufgrund mangelnder Implementierungen wieder gestrichen.

</li>

</ol>

Die weiteren Grafikelemente existieren, um einerseits eine bessere Nutzbarkeit zu gewährleisten, andererseits aber auch, um die inhaltliche Bedeutung klarer herauszustellen, weil der Notation eines entsprechenden Pfades im <a href="Quelltext" title="Quelltext">Quelltext</a> oft nicht auf den ersten Blick anzusehen ist, ob es sich um einen einfachen Kreis, eine Ellipse, ein Rechteck mit abgerundeten Ecken handelt. Ferner erleichtert es auch die Animation dieser speziellen Formen. Sie können ebenso wie das Pfad-Element als Umriss gezeichnet, gefüllt und zum Clipping benutzt werden (mit Ausnahme des <code><image /></code>-Elements). Eine weitere Ausnahme ergibt sich daraus, dass die Tiny-Profile keine Ellipsenbögen erlauben, somit können Kreise, Ellipsen und auch Rechtecke mit elliptisch abgerundeten Ecken in diesem Profil nicht exakt mit dem Element <code><path /></code> konstruiert werden, mit den dafür vorgesehenen Spezialelementen schon.

</pre></div>

<div class="mw-heading mw-heading5"><h5 id="Kreis">Kreis</h5></div>

Das Element <code><circle /></code> definiert einen <a href="Kreis" title="Kreis">Kreis</a>, der durch die Position des Mittelpunktes (cx;cy) und seinen <a href="Radius" title="Radius">Radius</a> "r" beschrieben wird:

</pre></div>

<div class="mw-heading mw-heading5"><h5 id="Ellipse">Ellipse</h5></div>

Das Element <code><ellipse /></code> definiert eine <a href="Ellipse" title="Ellipse">Ellipse</a>, welche durch die Position ihres Mittelpunktes (cx;cy) und ihre zwei <a href="Gro%C3%9Fe_Halbachse" class="mw-redirect" title="Große Halbachse">Halbachsenradien</a> (rx;ry) beschrieben wird. Ist rx = ry ergibt sich ein Kreis mit dem Mittelpunkt (cx;cy).

</pre></div>

Um die Ausrichtung der Achsen zu ändern, muss man entweder mit dem Pfadelement oder mit Transformationen arbeiten.

<div class="mw-heading mw-heading5"><h5 id="Rechteck">Rechteck</h5></div>

Das Element <code><rect /></code> definiert ein <a href="Rechteck" title="Rechteck">Rechteck</a> über die Position seiner oberen linken Ecke (x, y), seiner Breite (width) und seiner Höhe (height). Optional können die Ecken des Rechteckes durch Angabe von Radien (rx, ry) abgerundet werden.

</pre></div>

<div class="mw-heading mw-heading5"><h5 id="Linie">Linie</h5></div>

Das Element <code><line /></code> definiert eine einfache gerade Linie (Strecke), die über die Koordinaten ihrer beiden Endpunkte (x1,y1 und x2,y2) beschrieben wird.

</pre></div>

<div class="mw-heading mw-heading5"><h5 id="Polygonzug">Polygonzug</h5></div>

Das Element <code><polyline /></code> definiert eine beliebige Zahl von Punkten, die als <a href="Polygonzug_(Mathematik)" title="Polygonzug (Mathematik)">Polygonzug</a> durch Strecken verbunden werden. Die Punkte werden mittels des Parameters points über Koordinatenpaare beschrieben.

</pre></div>

<div class="mw-heading mw-heading5"><h5 id="Polygon">Polygon</h5></div>

Das Element <code><polygon /></code> definiert ein <a href="Polygon" title="Polygon">Vieleck</a>. Es wird genauso definiert wie der Polygonzug, wobei hier zusätzlich der letzte Punkt mit dem ersten verbunden wird, sodass ein geschlossenes Polygon entsteht.

Mit dem Element <code><text /></code> wird Text in die Grafik eingebettet. Das Textelement kann über Attribute, wie zum Beispiel Schriftgröße und Schriftart, Laufrichtung und Wortabstand formatiert werden. Text kann zudem über Unterelemente wie <code><tspan /></code> strukturiert werden.

Das Element (<code><image /></code>) bindet eine Rastergrafik ein, die über eine Pfadangabe, Breite und Höhe sowie die Position beschrieben wird.

<div class="mw-heading mw-heading4"><h4 id="Gruppierung">Gruppierung</h4></div>

Alle diese Elemente können durch das Gruppenelement (<code><g /></code>) zusammengefasst werden. Transformationen und Styling, die auf das Gruppenelement angewendet werden, gelten für alle damit zusammengefassten untergeordneten Elemente.

Auch das Element <code><a /></code> eignet sich entsprechend zur Gruppierung von darzustellenden Inhalten,

kann aber zusätzlich eine Verweisfunktionalität bekommen.

Auch das Element <code><defs /></code> dient in gewisser Weise der Gruppierung, dessen Inhalt wird aber nicht direkt dargestellt werden, sondern ist als Vorrat gedacht, aus dem andere Elemente referenzieren können.

<div class="mw-heading mw-heading4"><h4 id="Textalternativen,_Barrierefreiheit_und_Zugänglichkeit">Textalternativen, Barrierefreiheit und Zugänglichkeit</h4></div>

Wie bei den meisten vom W3C empfohlenen Formaten wird auch bei SVG besonderer Wert darauf gelegt, dass Autoren einfache Möglichkeiten gegeben werden, Inhalte zugänglich anzubieten.

Basis ist dabei primär die Möglichkeit der Bereitstellung einer Textalternative.

Umgedreht könnte man auch die grafische Repräsentation des Dokumentes als Alternative zu diesem Textinhalt bezeichnen. Fehlt eine hinreichende Textalternative, erlaubt das den formalen Rückschluss, dass das Dokument keine relevante Information enthält.

Jedes SVG-Dokument, das inhaltlich relevant ist, sollte daher mindestens als erstes Kindelement des Wurzelelementes ein Element <code><title /></code> haben. Wie der Name schon andeutet, wird darin der Titel des Werkes als Text genannt, etwa im Sinne einer Kurzzusammenfassung. Titel können auch lediglich der Identifikation eines Werkes in einer externen Diskussion dienen (wie man Werke von Künstlern bezeichnet, wenn man über diese Werke diskutieren will).

Auf <code><title /></code> kann ein Element <code><desc /></code> folgen.

Der Inhalt von <code><desc /></code> ist eine ausführlichere Beschreibung des Werkes, eher was seine Bedeutung und Funktion anbelangt, als deren grafische Umsetzung. Der Inhalt von <code><desc /></code> kann einfacher Text sein, er kann aber auch mit einem anderen XML-Format wie etwa XHTML strukturiert werden.

<code><title /></code> und <code><desc /></code> stellen zusammen die Textalternative zum grafischen Inhalt des Dokumentes dar. Dies ist damit der Kerninhalt des Dokumentes hinsichtlich der Funktion von Barrierefreiheit und Zugänglichkeit und erlaubt somit auch Personen Zugang zur Information des Dokumentes, welche die grafische Repräsentation nicht sehen können oder wollen. Da die inhaltliche Bedeutung grafischer Repräsentationen nicht zwangsläufig einfach zu verstehen ist, kann dieser alternative Inhalt natürlich auch für andere Personen sehr nützlich sein.

Als Alternative wird jedenfalls diese Textalternative nur dargestellt, falls die grafische Repräsentation nicht dargestellt wird. Zusätzlich kann eine Darstellung der Textalternative erfolgen, wenn der Nutzer dies anfordert.

Auf <code><desc /></code> kann ferner ein Element <code><metadata /></code> folgen, das primär dazu gedacht ist, Metainformationen über das Dokument zu beinhalten.

Diese Metainformationen werden in der Regel strukturiert notiert, damit sie automatisch von Programmen ausgewertet werden können. Zur Strukturierung eignet sich zum Beispiel das XML-Format <a href="RDF_(Resource_Description_Framework)" class="mw-redirect" title="RDF (Resource Description Framework)">RDF</a> oder Elemente und Terme gemäß <a href="Dublin_Core" title="Dublin Core">Dublin Core</a>.

Fast alle anderen Elemente von SVG können ebenfalls <code><title /></code>, <code><desc /></code> und <code><metadata /></code> mit beschriebener Funktion enthalten, sie bilden dann entsprechend die Textalternative und Metainformation für das Element, in dem sie notiert sind, einschließlich der Nachfahren dieses Elementes.

Das Konzept weist hinsichtlich Mehrsprachigkeit Schwächen auf, insbesondere was das Element <code><title /></code> des Wurzelelementes anbelangt, das nur mit einer Sprache notiert werden kann.

Bei mehrsprachigen Werken kann es also sinnvoll sein, den Inhalt dieses Elementes nur als sprach-invariante Identifikation des Werkes zu betrachten und die eigentliche mehrsprachige Textalternative in den beiden anderen Elementen unterzubringen, die mehr Struktur aufweisen können.

<div class="mw-heading mw-heading4"><h4 id="Präsentation_und_Stilvorlagen">Präsentation und Stilvorlagen</h4></div>

Die Darstellung von Elementen kann mit Präsentationsattributen beeinflusst werden. Festgelegt werden können zum Beispiel Füllung, Konturlinie und Transparenz der Elemente sowie bei Text die Eigenschaften der Schrift. Zu den Präsentationsattributen gibt es auch jeweils gleichnamige Eigenschaften gemäß <a href="Cascading_Style_Sheets" title="Cascading Style Sheets">Cascading Style Sheets</a> (CSS), die sich eignen, um mit einer Stilvorlage eine alternative Präsentation anzubieten. Die Eigenschaften und damit Stilvorlagen sind bei den Profilen vom Typ tiny nicht vorgesehen. Die Präsentationsattribute und die zugehörigen Eigenschaften richten sich dabei in weiten Teilen nach den im XML-Umfeld weit verbreiteten Stilvorlagen-Sprachen <a href="XSL" class="mw-redirect" title="XSL">XSL</a> und <a href="Cascading_Style_Sheets" title="Cascading Style Sheets">CSS</a>.<a href="#cite_note-styling-26">[22]</a>

Über zusätzliche Elemente können nicht nur Farben, sondern auch Farbverläufe und Muster verwendet werden.

Durch die Verfügbarkeit von Präsentationsattributen und Eigenschaften kann ähnlich wie bei der Kombination (X)HTML und CSS eine Trennung zwischen Inhalt und Dekoration vorgenommen werden.

Als inhaltlich relevant oder als für das Verständnis des Dokumentes wichtig wird dabei betrachtet, was mit Elementen und Attributen notiert wird, als Dekoration das, was als alternative Präsentation mit Stilvorlagen in einer anderen Sprache wie <a href="Cascading_Style_Sheets" title="Cascading Style Sheets">CSS</a> angeboten wird.

Wie bei allen <a href="Extensible_Markup_Language" title="Extensible Markup Language">XML</a>-Formaten können externe Stilvorlagen mit entsprechenden Verarbeitungsanweisungen referenziert werden.

Zusätzlich hat SVG auch ein spezielles Element <code>style</code>, in dem Stilvorlagen notiert werden können.

Mit einem Attribut <code>style</code> kann zudem bei jedem Element eine Stilvorlage notiert werden.

Da dem Attributwert von <code>style</code> allerdings eine recht hohe Priorität zukommt und die Stilvorlage zudem als Attributwert schlecht vom eigentlichen Inhalt getrennt ist, gilt die Verwendung des Attributes als einfach vermeidbar und schlecht hinsichtlich des Prinzips der Trennung von Inhalt und Dekoration.

<div class="mw-heading mw-heading4"><h4 id="Transformation">Transformation</h4></div>

Jedes Element und jede Gruppe von Elementen kann durch eine Reihe <a href="Affine_Abbildung" title="Affine Abbildung">affiner Transformationen</a> in Position, Orientierung und Form verändert werden. Die Transformation wird einem beliebigen Element als Attribut angehängt. Zur Verfügung stehen <a href="Parallelverschiebung" title="Parallelverschiebung">Translation (Parallelverschiebung)</a>, <a href="Drehung" title="Drehung">Drehung</a>, <a href="Skalierung_(Computergrafik)" title="Skalierung (Computergrafik)">Skalierung</a>, <a href="Scherung_(Geometrie)" title="Scherung (Geometrie)">Scherung</a> sowie die Kombination verschiedener Transformationen in Form einer 3×3-<a href="Matrix_(Mathematik)" title="Matrix (Mathematik)">Matrix</a>. Die Matrix wird auf Punkte in <a href="Projektives_Koordinatensystem" title="Projektives Koordinatensystem">projektiver Darstellung</a> angewandt und stellt somit die Kombination einer <a href="Abbildungsmatrix" title="Abbildungsmatrix">linearen Abbildung</a> in Form einer 2×2-Matrix mit einer Translation dar, ohne jedoch zwischen den beiden letzten Abbildungstypen unterscheiden zu müssen.<a href="#cite_note-transf-27">[23]</a> Die Transformationen können beliebig kombiniert werden, wobei die Hintereinanderausführung von Transformationen der <a href="Matrixmultiplikation" class="mw-redirect" title="Matrixmultiplikation">Multiplikation</a> der Transformationsmatrizen entspricht.

Eine Transformation mit direkter Matrixangabe erfolgt mit

<dl><dd><code>transform="matrix(a b c d e f)"</code></dd></dl>

Das ist eine Kurzform für die nichtkonstanten Elemente der Abbildungsmatrix

<mrow>

<mtr>

<mtd>

</mtd>

<mtd>

</mtd>

<mtd>

</mtd>

</mtr>

<mtr>

<mtd>

</mtd>

<mtd>

</mtd>

<mtd>

</mtd>

</mtr>

<mtr>

<mtd>

</mtd>

<mtd>

</mtd>

<mtd>

</mtd>

</mtr>

</mtable>

</mrow>

</mstyle>

</mrow>

<annotation encoding="application/x-tex">{\displaystyle {\begin{pmatrix}a&c&e\\b&d&f\\0&0&1\\\end{pmatrix}}}</annotation>

</semantics>

</math><img src="./_assets_/eb734a37dd21ce173a46342d1cc64c92/933da126b1ceb29fb152138794875085a9e7770d.svg" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -4.171ex; width:13.188ex; height:9.509ex;" alt="{\displaystyle {\begin{pmatrix}a&c&e\\b&d&f\\0&0&1\\\end{pmatrix}}}" loading="lazy"></dd></dl>

Hierbei entspricht:

<th colspan="3">Translation um tx und ty

</th></tr>

<tr>

<td><code>transform="translate(tx,ty)"</code>

</td>

<td><code>transform="matrix(1 0 0 1 tx ty)"</code>

</td>

<mrow>

<mtr>

<mtd>

</mtd>

<mtd>

</mtd>

<mtd>

<msub>

</mrow>

</msub>

</mtd>

</mtr>

<mtr>

<mtd>

</mtd>

<mtd>

</mtd>

<mtd>

<msub>

</mrow>

</msub>

</mtd>

</mtr>

<mtr>

<mtd>

</mtd>

<mtd>

</mtd>

<mtd>

</mtd>

</mtr>

</mtable>

</mrow>

</mstyle>

</mrow>

<annotation encoding="application/x-tex">{\displaystyle {\begin{pmatrix}1&0&t_{x}\\0&1&t_{y}\\0&0&1\\\end{pmatrix}}}</annotation>

</semantics>

</math><img src="./_assets_/eb734a37dd21ce173a46342d1cc64c92/e5f13af57f227072d68094c3ed979ed3bcd330e2.svg" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -4.171ex; width:13.801ex; height:9.509ex;" alt="{\displaystyle {\begin{pmatrix}1&0&t_{x}\\0&1&t_{y}\\0&0&1\\\end{pmatrix}}}" loading="lazy">

</td></tr>

<tr>

<th colspan="3">Rotation mit Winkel α um Punkt (0,0)

</th></tr>

<tr>

<td><code>transform="rotate(α)"</code>

</td>

<td><code>transform="matrix(cos(α) sin(α) -sin(α) cos(α) 0 0)"</code>

</td>

<mrow>

<mtr>

<mtd>

</mtd>

<mtd>

</mtd>

<mtd>

</mtd>

</mtr>

<mtr>

<mtd>

</mtd>

<mtd>

</mtd>

<mtd>

</mtd>

</mtr>

<mtr>

<mtd>

</mtd>

<mtd>

</mtd>

<mtd>

</mtd>

</mtr>

</mtable>

</mrow>

</mstyle>

</mrow>

<annotation encoding="application/x-tex">{\displaystyle {\begin{pmatrix}\cos(\alpha )&-\sin(\alpha )&0\\\sin(\alpha )&\cos(\alpha )&0\\0&0&1\\\end{pmatrix}}}</annotation>

</semantics>

</math><img src="./_assets_/eb734a37dd21ce173a46342d1cc64c92/d83698dca8d2285ed6736f63a7869cebb88d0c39.svg" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -4.171ex; width:25.382ex; height:9.509ex;" alt="{\displaystyle {\begin{pmatrix}\cos(\alpha )&-\sin(\alpha )&0\\\sin(\alpha )&\cos(\alpha )&0\\0&0&1\\\end{pmatrix}}}" loading="lazy">

</td></tr>

<tr>

<th colspan="3">Rotation mit Winkel α um Punkt (cx cy) (siehe unten)

</th></tr>

<tr>

<td><code>transform="rotate(α,cx,cy)"</code>

</td>

<td><code>transform="matrix(cos(α), sin(α), -sin(α), cos(α), cx, cy) matrix(1,0,0,1,-cx,-cy)"</code> = <code>transform="matrix(cos(α), sin(α), -sin(α), +cos(α), (1-cos(α))cx + sin(α)cy, (1-cos(α))cy - sin(α)cx)"</code>

</td>

<mrow>

<mtr>

<mtd>

</mtd>

<mtd>

</mtd>

<mtd>

<msub>

</mrow>

</msub>

<msub>

</mrow>

</msub>

</mtd>

</mtr>

<mtr>

<mtd>

</mtd>

<mtd>

</mtd>

<mtd>

<msub>

</mrow>

</msub>

<msub>

</mrow>

</msub>

</mtd>

</mtr>

<mtr>

<mtd>

</mtd>

<mtd>

</mtd>

<mtd>

</mtd>

</mtr>

</mtable>

</mrow>

</mstyle>

</mrow>

<annotation encoding="application/x-tex">{\displaystyle {\begin{pmatrix}\cos(\alpha )&-\sin(\alpha )&(1-\cos(\alpha ))\,c_{x}+\sin(\alpha )\,c_{y}\\\sin(\alpha )&+\cos(\alpha )&(1-\cos(\alpha ))\,c_{y}-\sin(\alpha )\,c_{x}\\0&0&1\\\end{pmatrix}}}</annotation>

</semantics>

</math><img src="./_assets_/eb734a37dd21ce173a46342d1cc64c92/32bbb361ab181c74558ca7962b764857d4dac9cb.svg" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -4.338ex; width:50.698ex; height:9.843ex;" alt="{\displaystyle {\begin{pmatrix}\cos(\alpha )&-\sin(\alpha )&(1-\cos(\alpha ))\,c_{x}+\sin(\alpha )\,c_{y}\\\sin(\alpha )&+\cos(\alpha )&(1-\cos(\alpha ))\,c_{y}-\sin(\alpha )\,c_{x}\\0&0&1\\\end{pmatrix}}}" loading="lazy">

</td></tr>

<tr>

<th colspan="3">Skalierung um die Faktoren sx und sy

</th></tr>

<tr>

<td><code>transform="scale(sx,sy)"</code>

</td>

<td><code>transform="matrix(sx 0 0 sy 0 0)"</code>

</td>

<mrow>

<mtr>

<mtd>

<msub>

</mrow>

</msub>

</mtd>

<mtd>

</mtd>

<mtd>

</mtd>

</mtr>

<mtr>

<mtd>

</mtd>

<mtd>

<msub>

</mrow>

</msub>

</mtd>

<mtd>

</mtd>

</mtr>

<mtr>

<mtd>

</mtd>

<mtd>

</mtd>

<mtd>

</mtd>

</mtr>

</mtable>

</mrow>

</mstyle>

</mrow>

<annotation encoding="application/x-tex">{\displaystyle {\begin{pmatrix}s_{x}&0&0\\0&s_{y}&0\\0&0&1\\\end{pmatrix}}}</annotation>

</semantics>

</math><img src="./_assets_/eb734a37dd21ce173a46342d1cc64c92/129970c55b5fe7fef5d6ea618c4d3baa62255d40.svg" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -4.171ex; width:15.029ex; height:9.509ex;" alt="{\displaystyle {\begin{pmatrix}s_{x}&0&0\\0&s_{y}&0\\0&0&1\\\end{pmatrix}}}" loading="lazy">

</td></tr>

<tr>

<th colspan="3">Scherung um Winkel α in X-Richtung

</th></tr>

<tr>

<td><code>transform="skewX(α)"</code>

</td>

<td><code>transform="matrix(1,0,tan(α),1,0,0)"</code>

</td>

<mrow>

<mtr>

<mtd>

</mtd>

<mtd>

</mtd>

<mtd>

</mtd>

</mtr>

<mtr>

<mtd>

</mtd>

<mtd>

</mtd>

<mtd>

</mtd>

</mtr>

<mtr>

<mtd>

</mtd>

<mtd>

</mtd>

<mtd>

</mtd>

</mtr>

</mtable>

</mrow>

</mstyle>

</mrow>

<annotation encoding="application/x-tex">{\displaystyle {\begin{pmatrix}1&\tan(\alpha )&0\\0&1&0\\0&0&1\\\end{pmatrix}}}</annotation>

</semantics>

</math><img src="./_assets_/eb734a37dd21ce173a46342d1cc64c92/f7e5bb79b3b727233831cc0783ec613d4c1c787d.svg" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -4.171ex; width:18.445ex; height:9.509ex;" alt="{\displaystyle {\begin{pmatrix}1&\tan(\alpha )&0\\0&1&0\\0&0&1\\\end{pmatrix}}}" loading="lazy">

</td></tr>

<tr>

<th colspan="3">Scherung um Winkel α in Y-Richtung

</th></tr>

<tr>

<td><code>transform="skewY(α)"</code>

</td>

<td><code>transform="matrix(1,tan(α),0,1,0,0)"</code>

</td>

<mrow>

<mtr>

<mtd>

</mtd>

<mtd>

</mtd>

<mtd>

</mtd>

</mtr>

<mtr>

<mtd>

</mtd>

<mtd>

</mtd>

<mtd>

</mtd>

</mtr>

<mtr>

<mtd>

</mtd>

<mtd>

</mtd>

<mtd>

</mtd>

</mtr>

</mtable>

</mrow>

</mstyle>

</mrow>

<annotation encoding="application/x-tex">{\displaystyle {\begin{pmatrix}1&0&0\\\tan(\alpha )&1&0\\0&0&1\\\end{pmatrix}}}</annotation>

</semantics>

</math><img src="./_assets_/eb734a37dd21ce173a46342d1cc64c92/fc24d967fa8c5bb206a48335cabc8d8e96da7861.svg" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -4.171ex; width:18.445ex; height:9.509ex;" alt="{\displaystyle {\begin{pmatrix}1&0&0\\\tan(\alpha )&1&0\\0&0&1\\\end{pmatrix}}}" loading="lazy">

</td></tr></tbody></table>

Matrixrechnung:

Eine Abbildung wirkt auf einen Punkt P – d. h. auf dessen projektive Darstellung in <a href="Homogene_Koordinaten" title="Homogene Koordinaten">homogenen Koordinaten</a> – indem diese von links mit der entsprechenden Abbildungsmatrix multipliziert wird. Wird P um T verschoben, so sind seine neuen Koordinaten

<mrow>

<mtr>

<mtd>

</mtd>

<mtd>

</mtd>

<mtd>

<msub>

</mrow>

</msub>

</mtd>

</mtr>

<mtr>

<mtd>

</mtd>

<mtd>

</mtd>

<mtd>

<msub>

</mrow>

</msub>

</mtd>

</mtr>

<mtr>

<mtd>

</mtd>

<mtd>

</mtd>

<mtd>

</mtd>

</mtr>

</mtable>

</mrow>

<mrow>

<mtr>

<mtd>

<msub>

</mrow>

</msub>

</mtd>

</mtr>

<mtr>

<mtd>

<msub>

</mrow>

</msub>

</mtd>

</mtr>

<mtr>

<mtd>

</mtd>

</mtr>

</mtable>

</mrow>

<mrow>

<mtr>

<mtd>

<msub>

</mrow>

</msub>

<msub>

</mrow>

</msub>

</mtd>

</mtr>

<mtr>

<mtd>

<msub>

</mrow>

</msub>

<msub>

</mrow>

</msub>

</mtd>

</mtr>

<mtr>

<mtd>

</mtd>

</mtr>

</mtable>

</mrow>

</mstyle>

</mrow>

<annotation encoding="application/x-tex">{\displaystyle T(P)=T\cdot P={\begin{pmatrix}1&0&t_{x}\\0&1&t_{y}\\0&0&1\\\end{pmatrix}}\cdot {\begin{pmatrix}p_{x}\\p_{y}\\1\\\end{pmatrix}}={\begin{pmatrix}p_{x}+t_{x}\\p_{y}+t_{y}\\1\\\end{pmatrix}}}</annotation>

</semantics>

</math><img src="./_assets_/eb734a37dd21ce173a46342d1cc64c92/41560aedda8964102c72e636d0aa0e6893a7fea3.svg" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -4.171ex; width:54.2ex; height:9.509ex;" alt="{\displaystyle T(P)=T\cdot P={\begin{pmatrix}1&0&t_{x}\\0&1&t_{y}\\0&0&1\\\end{pmatrix}}\cdot {\begin{pmatrix}p_{x}\\p_{y}\\1\\\end{pmatrix}}={\begin{pmatrix}p_{x}+t_{x}\\p_{y}+t_{y}\\1\\\end{pmatrix}}}" loading="lazy"></dd></dl>

analog für eine Skalierung mit S:

<mrow>

<mtr>

<mtd>

<msub>

</mrow>

</msub>

</mtd>

<mtd>

</mtd>

<mtd>

</mtd>

</mtr>

<mtr>

<mtd>

</mtd>

<mtd>

<msub>

</mrow>

</msub>

</mtd>

<mtd>

</mtd>

</mtr>

<mtr>

<mtd>

</mtd>

<mtd>

</mtd>

<mtd>

</mtd>

</mtr>

</mtable>

</mrow>

<mrow>

<mtr>

<mtd>

<msub>

</mrow>

</msub>

</mtd>

</mtr>

<mtr>

<mtd>

<msub>

</mrow>

</msub>

</mtd>

</mtr>

<mtr>

<mtd>

</mtd>

</mtr>

</mtable>

</mrow>

<mrow>

<mtr>

<mtd>

<msub>

</mrow>

</msub>

<msub>

</mrow>

</msub>

</mtd>

</mtr>

<mtr>

<mtd>

<msub>

</mrow>

</msub>

<msub>

</mrow>

</msub>

</mtd>

</mtr>

<mtr>

<mtd>

</mtd>

</mtr>

</mtable>

</mrow>

</mstyle>

</mrow>

<annotation encoding="application/x-tex">{\displaystyle S(P)=S\cdot P={\begin{pmatrix}s_{x}&0&0\\0&s_{y}&0\\0&0&1\\\end{pmatrix}}\cdot {\begin{pmatrix}p_{x}\\p_{y}\\1\\\end{pmatrix}}={\begin{pmatrix}s_{x}\cdot p_{x}\\s_{y}\cdot p_{y}\\1\\\end{pmatrix}}}</annotation>

</semantics>

</math><img src="./_assets_/eb734a37dd21ce173a46342d1cc64c92/dc2f7f58706a81431faad7b4c3240c325879cd43.svg" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -4.171ex; width:54.243ex; height:9.509ex;" alt="{\displaystyle S(P)=S\cdot P={\begin{pmatrix}s_{x}&0&0\\0&s_{y}&0\\0&0&1\\\end{pmatrix}}\cdot {\begin{pmatrix}p_{x}\\p_{y}\\1\\\end{pmatrix}}={\begin{pmatrix}s_{x}\cdot p_{x}\\s_{y}\cdot p_{y}\\1\\\end{pmatrix}}}" loading="lazy"></dd></dl>

Für die Hintereinanderausführungen von T und S gilt in diesem Falle

<mrow>

<mtr>

<mtd>

<msub>

</mrow>

</msub>

</mtd>

<mtd>

</mtd>

<mtd>

<msub>

</mrow>

</msub>

</mtd>

</mtr>

<mtr>

<mtd>

</mtd>

<mtd>

<msub>

</mrow>

</msub>

</mtd>

<mtd>

<msub>

</mrow>

</msub>

</mtd>

</mtr>

<mtr>

<mtd>

</mtd>

<mtd>

</mtd>

<mtd>

</mtd>

</mtr>

</mtable>

</mrow>

</mstyle>

</mrow>

<annotation encoding="application/x-tex">{\displaystyle T\circ S=T\cdot S={\begin{pmatrix}s_{x}&0&t_{x}\\0&s_{y}&t_{y}\\0&0&1\\\end{pmatrix}}}</annotation>

</semantics>

</math><img src="./_assets_/eb734a37dd21ce173a46342d1cc64c92/61ae9d17e9da635c16eb7bff30da27b5fb7d4f47.svg" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -4.171ex; width:32.22ex; height:9.509ex;" alt="{\displaystyle T\circ S=T\cdot S={\begin{pmatrix}s_{x}&0&t_{x}\\0&s_{y}&t_{y}\\0&0&1\\\end{pmatrix}}}" loading="lazy"></dd></dl>

sowie

<mrow>

<mtr>

<mtd>

<msub>

</mrow>

</msub>

</mtd>

<mtd>

</mtd>

<mtd>

<msub>

</mrow>

</msub>

<msub>

</mrow>

</msub>

</mtd>

</mtr>

<mtr>

<mtd>

</mtd>

<mtd>

<msub>

</mrow>

</msub>

</mtd>

<mtd>

<msub>

</mrow>

</msub>

<msub>

</mrow>

</msub>

</mtd>

</mtr>

<mtr>

<mtd>

</mtd>

<mtd>

</mtd>

<mtd>

</mtd>

</mtr>

</mtable>

</mrow>

</mstyle>

</mrow>

<annotation encoding="application/x-tex">{\displaystyle S\circ T=S\cdot T={\begin{pmatrix}s_{x}&0&s_{x}\!\cdot \!t_{x}\\0&s_{y}&s_{y}\!\cdot \!t_{y}\\0&0&1\\\end{pmatrix}}}</annotation>

</semantics>

</math><img src="./_assets_/eb734a37dd21ce173a46342d1cc64c92/058ebc49d2129cc9af439bf5eadcf025a857211f.svg" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -4.171ex; width:35.388ex; height:9.509ex;" alt="{\displaystyle S\circ T=S\cdot T={\begin{pmatrix}s_{x}&0&s_{x}\!\cdot \!t_{x}\\0&s_{y}&s_{y}\!\cdot \!t_{y}\\0&0&1\\\end{pmatrix}}}" loading="lazy"></dd></dl>

die letzte Darstellung kann in SVG z. B. codiert werden als

<pre>„scale(sx sy) translate(tx ty)“

</pre>

oder als

<pre>„matrix(sx 0 0 sy sx·tx sy·ty)“

</pre>

Die Verkettung von zweimal "matrix" in SVG bedeutet also

<dl><dd><code>transform="matrix(a1 b1 c1 d1 e1 f1) matrix(a2 b2 c2 d2 e2 f2)"</code></dd>

<dd><code>= transform="a1*a2+c1*b2, b1*a2+d1*b2, a1*c2+c1*d2, b1*c2+d1*d2, a1*e2+c1*f2+e1, b1*e2+d1*f2+f1"</code></dd></dl>

<div class="mw-heading mw-heading4"><h4 id="Animation">Animation</h4></div>

SVG hat Elemente, mit denen Animation interaktiv und deklarativ bewerkstelligt werden kann, das heißt ohne Skripte rein durch Angaben in der XML-Auszeichnungsprache.

SVG übernimmt dabei von <a href="Synchronized_Multimedia_Integration_Language" title="Synchronized Multimedia Integration Language">SMIL</a> Elemente und die Interpretation derselben in den eigenen Namensraum.

Durch die von <a href="Synchronized_Multimedia_Integration_Language" title="Synchronized Multimedia Integration Language">SMIL</a> übernommenen Elemente können deklarative Animationen realisiert werden. In den Empfehlungen ist im Detail beschrieben, welche Merkmale animierbar sind und in welcher Weise. Animierbar sind die meisten Attribute und Eigenschaften, zusätzlich gibt es die Möglichkeit, die Position von Gruppierungselementen oder darstellbaren Elementen zu animieren.

Zeitangaben können von <a href="Millisekunde" class="mw-redirect" title="Millisekunde">Millisekunden</a> bis <a href="Stunde" title="Stunde">Stunden</a> angegeben und verschieden ausgezeichnet werden. Für die meisten Animationselemente wird ein Pflichtattribut benötigt, das die Art der Animation festlegt. Weitere grundlegende Komponenten sind Zeitangaben, Zustände während der Animation (optional), der Zustand nach der Animation, und ob die Animation nach Beendigung wiederholt werden soll, ob der Animationseffekt dann kumulativ ist und ob er additiv hinsichtlich anderer Animationen mit niedrigerer Priorität und der notierten Attributwerte sein soll. Für die Zeitangabe werden logische Begriffe wie begin (<a href="Englische_Sprache" title="Englische Sprache">englisch</a>: Start, Beginn) end (englisch: Ende) und dur (englisch „duration“: Dauer) verwendet. Start, Wiederholungen etc. können auch von <a href="Ereignis_(Programmierung)" title="Ereignis (Programmierung)">Ereignissen</a> wie Mausberührung oder -klick abhängig gemacht werden.

Die Auswahl des animierten Attributes oder der animierten Eigenschaft wird in SVG durch zwei Attribute festgelegt: <code>attributeName</code> gibt den Namen des zu animierenden Attributes oder der zu animierenden Eigenschaft an, <code>attributeType</code> gibt an, ob ein Attribut animiert wird oder eine (CSS-)Eigenschaft. Im illustrierten Beispiel wird angedeutet, dass die Füllung (<code>fill</code>-Attribut) eines Rechtecks sowie dessen Transformation (<code>transform</code>-Attribut) über die Dauer von fünf Sekunden animiert wird.

Die Illustration selbst enthält keine Animation. Zu Beginn ist das Rechteck blau gefüllt und nicht verdreht, nach fünf Sekunden ist es grün gefüllt, etwas versetzt und um 150° verdreht. Die Zwischenzustände können je nach den angegebenen Attributen diskret geändert werden, sich gleichmäßig, aber auch ungleichmäßig ändern, im Beispiel schematisch durch vier Zwischenschritte dargestellt.

<div class="mw-heading mw-heading4"><h4 id="Grafische_Effekte_und_Filter">Grafische Effekte und Filter</h4></div>

<div class="sieheauch" role="navigation" style="font-style:italic;">Siehe auch: <a href="SVG-Filtereffekte" title="SVG-Filtereffekte">SVG-Filtereffekte</a></div>

Bekannte <a href="Grafikfilter" title="Grafikfilter">Grafikfilter</a> sind aus <a href="Desktop-Publishing" title="Desktop-Publishing">Desktop-Publishing</a>-Programmen übernommen worden und arbeiten nach dem Matrizen-Prinzip, bei dem Operatoren und Funktionen die Form der <a href="Matrix_(Mathematik)" title="Matrix (Mathematik)">Matrix</a> ausdrücken. Es wird jede einzelne Bildposition mit dem definierten Filtereffekt berechnet und auf die nächste übertragen. Auf diese Weise lassen sich Bilder und Grafiken auf verschiedenste Art und Weise bearbeiten.

<div class="mw-heading mw-heading4"><h4 id="Programmierung">Programmierung</h4></div>

SVG stellt mit Ausnahme des Profils Tiny 1.1 einen Zugriff auf das XML-Dokument-Objekt-Modell (DOM) bereit und zusätzlich eine eigene Erweiterung dieses DOMs. Damit wird es möglich, die Präsentation eines SVG-Dokumentes zu manipulieren. Dies wird meistens mit Skriptsprachen wie ECMAScript/JavaScript genutzt, um während der Präsentation diese dynamisch zu ändern, um Betrachtern einen interaktiven alternativen Zugang zum Inhalt zu ermöglichen. Die DOM-Repräsentation kann allerdings auch vor der Betrachtung manipuliert werden, wonach ein inhaltlich geändertes Dokument abgespeichert werden kann.

SVG selbst fordert allerdings nicht, dass eine bestimmte Skriptsprache interpretiert wird. Auch daher haben solche Skripte formal nicht die Möglichkeit, den Inhalt oder die Bedeutung eines Dokumentes während der Betrachtung zu ändern. Hinsichtlich Zugänglichkeit und Barrierefreiheit ist dies immer von Autoren zu bedenken, die Skripte in Dokumenten verwenden möchten.

Über das DOM können zum Beispiel neue Objekte erzeugt werden, die Elementen und ihren Eigenschaften entsprechen. Die DOM-Repräsentation eines Dokumentes kann so auf Benutzereingaben wie <a href="Mausklick" class="mw-redirect" title="Mausklick">Mausklicks</a> und Mausbewegungen reagieren oder vollständig algorithmisch generiert werden. Das lässt sich etwa in Web-Anwendungen nutzen (vergleiche den Grafikeditor SVG-edit,<a href="#cite_note-28">[24]</a> Diagramme in <a href="Google_Docs" title="Google Docs">Google Docs</a><a href="#cite_note-29">[25]</a> oder Kartenanwendungen<a href="#cite_note-30">[26]</a>).

Zur Manipulation von SVG definiert der SVG-Standard das SVG-DOM.<a href="#cite_note-31">[27]</a> Es erweitert das für alle XML-Arten gleiche Standard-DOM durch SVG-spezifische Datentypen und Funktionen, etwa für grafische Transformationen (<a href="Affine_Abbildung" title="Affine Abbildung">Affine Abbildungen</a>). Diese Schnittstelle ist für verschiedene Programmiersprachen standardisiert (für die standardisierte <a href="JavaScript" title="JavaScript">JavaScript</a>-Teilmenge ECMAScript, <a href="Java_(Programmiersprache)" title="Java (Programmiersprache)">Java</a>, <a href="Perl_(Programmiersprache)" title="Perl (Programmiersprache)">Perl</a> und <a href="Python_(Programmiersprache)" title="Python (Programmiersprache)">Python</a><a href="#cite_note-32">[28]</a>). In vielen gängigen Darstellungsprogrammen wird JavaScript zur DOM-Manipulation verwendet.

<div class="mw-heading mw-heading3"><h3 id="Beispiel">Beispiel</h3></div>

Das folgende Beispiel illustriert die Verwendung eines SVG-Dokuments zur Anzeige einer einfachen Vektorgrafik. Es zeigt das Grundgerüst eines SVG-Dokumentes sowie die Verwendung der grafischen Primitive line, rect und polygon. Das Polygon, das zur Darstellung der Pfeilspitze verwendet wird, wird außerdem mit Hilfe einer Transformation um 135° um die Spitze gedreht.

Die rechts dargestellte Grafik Variable Resistor.svg (Schaltbild eines <a href="Potentiometer" title="Potentiometer">Potentiometers</a>) ist mit dem folgenden, kommentierten Quelltext erzeugt:

version="1.1" baseProfile="full"

width="700px" height="400px" viewBox="0 0 700 400">

</svg>

</pre></div>

<div class="mw-heading mw-heading2"><h2 id="Profile">Profile</h2></div>

In SVG gibt es drei Profile, die für die Darstellung auf unterschiedlichen Ausgabegeräten abgestimmt sind und jeweils unterschiedlich umfangreich den SVG-Standard definieren. Sie werden im Wurzelelement (SVG) mit dem Attribut baseProfile angegeben.<a href="#cite_note-profiles-33">[29]</a>

<dd>(baseProfile="tiny") SVG Tiny 1.1 ist für stark beschränkte <a href="Mobile_internet_device" class="mw-redirect" title="Mobile internet device">Mobile internet devices</a> (MID) und <a href="Mobiltelefon" title="Mobiltelefon">Mobiltelefone</a> gedacht. Es definiert nur eine kleine Untermenge des SVG-Standards. SVG Tiny 1.2 ist für deutlich leistungsfähigere mobile Geräte gedacht und geht in seinen Merkmalen teils sogar über SVG Full 1.1 hinaus, klammert einige andere Teile von Version 1.1 aber auch aus.</dd>

<dd>(baseProfile="basic", englisch „einfach, grundlegend“) ist für etwas leistungsfähigere <a href="Mobile_internet_device" class="mw-redirect" title="Mobile internet device">MIDs</a> gedacht, definiert aber nicht den gesamten SVG-Standard.</dd>

<dd>(baseProfile="full", <a href="Englische_Sprache" title="Englische Sprache">englisch</a> „voll, vollständig“) ist für Computer als <a href="Ausgabeger%C3%A4t" title="Ausgabegerät">Ausgabegerät</a> gedacht und umfasst SVG voll.</dd></dl>

Durch die Benutzung von Profilen wird auch leistungsschwachen Geräten ermöglicht, mit standardkonformen SVG-Dateien zu arbeiten. Autoren sollten sich also bemühen, dass die zentralen Inhalte mit dem eingeschränkten Funktionsumfang sinnvoll präsentiert werden, die verwendeten zusätzlichen Möglichkeiten des vollen Profils also nicht essentiell für das Verständnis des Inhalts sind.

Darstellungsprogramme können solche Angaben natürlich auch nutzen, um den Nutzer zu warnen, dass das Programm eventuell nicht alle Inhalte korrekt anzeigen kann, wenn eine Version oder ein Profil verwendet wird, das im Programm gar nicht implementiert ist.

<div class="mw-heading mw-heading2"><h2 id="Verbreitung">Verbreitung</h2></div>

<div class="mw-heading mw-heading3"><h3 id="Desktop">Desktop</h3></div>

Einige <a href="Desktop-Umgebung" title="Desktop-Umgebung">Desktop-Umgebungen</a> benutzen SVG als Format für <a href="Icon_(Computer)" title="Icon (Computer)">Programmsymbole</a>, <a href="Hintergrundbild" title="Hintergrundbild">Hintergrundbilder</a> oder <a href="Mauscursor" class="mw-redirect" title="Mauscursor">Mauszeiger</a>. Der zusätzliche Ressourcenverbrauch zum <a href="Rasterung" title="Rasterung">Rendern</a> wird dabei durch steigende <a href="Hardware" title="Hardware">Hardwareressourcen</a> kompensiert, so etwa von <a href="Grafikkarte" title="Grafikkarte">Grafikkarten</a> direkt übernommen. Beispielhafte Projekte sind das <a href="Oxygen_Project" title="Oxygen Project">Oxygen Project</a> für <a href="K_Desktop_Environment" title="K Desktop Environment">KDE</a> und das <a href="Tango_Desktop_Project" title="Tango Desktop Project">Tango Desktop Project</a> für <a href="Gnome" title="Gnome">Gnome</a>.

<div class="mw-heading mw-heading3"><h3 id="Editoren">Editoren</h3></div>

<div class="mw-heading mw-heading4"><h4 id="Programme,_mit_denen_SVG-Dateien_erstellt_und_bearbeitet_werden_können">Programme, mit denen SVG-Dateien erstellt und bearbeitet werden können</h4></div>

<ul><li><a href="Inkscape" title="Inkscape">Inkscape</a> – Grafik- und Zeichenprogramm (freie Software; Linux/Unix, Windows, <a href="MacOS" title="MacOS">Mac OS X</a>; verwendet SVG als natives Dateiformat (mit Inkscape-Erweiterungen))</li>

<li><a href="Adobe_Illustrator" title="Adobe Illustrator">Adobe Illustrator</a> (<a href="Propriet%C3%A4r" title="Proprietär">proprietär</a>; Windows, Mac OS)</li>

<li><a href="Affinity" title="Affinity">Affinity</a> (Windows, Mac OS) und das Vorgängerprodukt <a href="Affinity_Designer" title="Affinity Designer">Affinity Designer</a> (Windows, Mac OS, iPad OS)<a href="#cite_note-34">[30]</a></li>

<li><a href="Apache_OpenOffice" title="Apache OpenOffice">Apache OpenOffice</a> – nativer Import und Export mit Einschränkungen (<a href="Freie_Software" title="Freie Software">freies</a> Office-Paket)</li>

<li>Aphalina Designer<a href="#cite_note-35">[31]</a> – vektorbasierte, Buch orientierte Tablet App für Windows (freie App, In-App Käufe; SVG Import und Export (Export als Kauf-Option))</li>

<li><a href="CodeMyPic" title="CodeMyPic">CodeMyPic</a><a href="#cite_note-36">[32]</a> – ein didaktischer Quelltexteditor zum Erlernen einfacher Bildkodierungen<a href="#cite_note-37">[33]</a> (freie Software; browserbasiert – verwendet SVG, das Browser-DOM und JavaScript zum Editieren)</li>

<li><a href="CorelDraw_Graphics_Suite" title="CorelDraw Graphics Suite">CorelDRAW</a> (proprietär; Windows, Mac OS)</li>

<li><a href="LibreOffice" title="LibreOffice">LibreOffice</a> – nativer Import und Export mit Einschränkungen (freies Office-Paket)</li>

<li><a href="Microsoft_Visio" title="Microsoft Visio">Microsoft Visio</a> (proprietär; Windows)</li>

<li><a href="PhotoLine" title="PhotoLine">PhotoLine</a> (proprietär; Windows, Mac OS)</li>

<li><a href="Scribus" title="Scribus">Scribus</a> (freie Software; Unix, Linux, Mac OS X, OS/2, Windows)</li>

<li>SVG-edit<a href="#cite_note-38">[34]</a> – Grafikeditor, online und offline verwendbar (freie Software; browserbasierend – verwendet SVG, das Browser-DOM und JavaScript zum Editieren)</li>

<li><a href="Xara_Designer_Pro" title="Xara Designer Pro">Xara Designer Pro</a> – Grafik- und Zeichenprogramm (proprietär für Windows)</li></ul>

Von Editoren erzeugte SVG-Dateien enthalten oft unnötig primitive, unnötig zahlreiche Elemente mit stereotyper Wiederholung teilweise wirkungsloser Attribute und sind daher leicht um einen Faktor 2 bis 100 größer. Das Erstellen von Grundformen mit bestimmten Symmetrien, etwa ein gleichschenkliges Dreieck oder ein Büschel Pfeile mit einheitlichen Spitzen, gelingt im Quellcode schnell und präzise, mit einem grafischen Editor nur schnell oder halbwegs präzise.

<div class="mw-heading mw-heading4"><h4 id="Programme,_mit_denen_SVG-Dateien_geöffnet_und_bearbeitet,_nicht_jedoch_im_selben_Format_gespeichert_werden_können">Programme, mit denen SVG-Dateien geöffnet und bearbeitet, nicht jedoch im selben Format gespeichert werden können</h4></div>

<ul><li><a href="GIMP" title="GIMP">GIMP</a> – <a href="Pixelgrafik" class="mw-redirect" title="Pixelgrafik">pixelbasiertes</a> Bildbearbeitungsprogramm (freie Software)</li></ul>

<div class="mw-heading mw-heading3"><h3 id="SVG-Interpretation_in_Darstellungsprogrammen">SVG-Interpretation in Darstellungsprogrammen</h3></div>

SVG wurde in erster Linie für das <a href="World_Wide_Web" title="World Wide Web">World Wide Web</a> entworfen. Darstellungsprogramme, vor allem <a href="Webbrowser" title="Webbrowser">Webbrowser</a>, können große Teile davon korrekt darstellen; d. h., sie benötigen kein SVG-Zusatzprogramm (Browser-<a href="Plug-in" title="Plug-in">Plug-in</a>). Der tatsächlich verfügbare Funktionsumfang hängt jedoch stark vom Darstellungsprogramm ab.

Beispielsweise waren für den Internet Explorer der oben erwähnte Unschärfefilter erst ab der Version 10 und Animationen überhaupt nicht verfügbar. Bei den meisten Programmen werden ferner auch SVG-Schriftarten komplett ignoriert.

Anhand der offiziellen SVG-Test-Suite erreichte Anfang 2011 <a href="Opera_(Browser)" title="Opera (Browser)">Opera</a> 11.01 mit 95,44 % der möglichen Punkte unter den verbreiteten Browsern den höchsten Unterstützungsgrad für SVG 1.1, der <a href="Internet_Explorer" title="Internet Explorer">Internet Explorer</a> 9.0 als inkompatibelster damals aktueller Browser nur 59,64 %.<a href="#cite_note-39">[35]</a> Zu bedenken ist dabei, dass die Test-Suite zur SVG-Empfehlung nicht dazu dient, den Funktionsumfang von Darstellungsprogrammen zu testen, sondern umgekehrt, ob Merkmale der Empfehlung implementiert wurden und implementierbar sind. Die Tests sind also nicht unabhängig von den Autoren der Empfehlung entstanden und einige der Autoren der Tests sind gleichzeitig Mitarbeiter der Unternehmen, welche die Darstellungsprogramme entwickeln und anbieten. Es handelt sich also nicht um einen systematischen und unabhängigen Test der Fähigkeiten der Programme. Es ist also nicht unbedingt ein guter Anhaltspunkt dafür, wie wahrscheinlich es ist, dass ein „normales“ SVG-Dokument korrekt präsentiert wird, weil „normale“ Dokumente meist viele Merkmale verwenden, Tests zu SVG-Spezifikationen aber beinahe nur die jeweils mit dem Dokument getesteten Merkmale. Die Gewichtung und Verwendung richtet sich dabei zudem eher nach der Komplexität der Merkmale und der Implementierung, nicht nach der typischen Verwendung in „normalen“ Dokumenten durch Autoren.

Bei anderen Ansätzen wird eher die Frage gestellt, ob bestimmte Merkmale für Autoren wirklich praktisch nutzbar sind.<a href="#cite_note-40">[36]</a> Auch hier empfiehlt es sich ähnlich wie bei der offiziellen Test-Suite natürlich, die einzelnen Testbeispiele im Detail durchzugehen und zu schauen, in welcher Tiefe und in welcher Kombination mit anderen Merkmalen überhaupt getestet wurde und wie unabhängig die Autoren der Tests von denen der Empfehlung und den Anbietern der Darstellungsprogramme sind, um zu einer zuverlässigen Aussage hinsichtlich der Nutzbarkeit für Autoren und Betrachter zu kommen.

Zum Beispiel bietet die Firma Savarese Software Research eine Erweiterung für den <a href="Internet_Explorer" title="Internet Explorer">Internet Explorer</a> in Version 6 bis 8 an.<a href="#cite_note-41">[37]</a>

Bekannt seit den Anfängen von SVG, aber nicht mehr weiterentwickelt, ist auch eine entsprechende Erweiterung der Firma Adobe, das in den Anfangsjahren von SVG praktisch das dominierende Programm zur Präsentation von SVG war.

Einige <a href="JavaScript" title="JavaScript">JavaScript</a>-<a href="Programmbibliothek" title="Programmbibliothek">Bibliotheken</a> (z. B. <a href="Dojo_Toolkit" title="Dojo Toolkit">dojo</a>.gfx, Raphaël, SVG Web) bieten die Möglichkeit, Bildelemente in JS-Syntax zu beschreiben. Falls SVG nicht interpretiert wird, kann über diesen Umweg dann automatisch ein vom Darstellungsprogramm interpretiertes Dokument-Objekt generiert werden (z. B. <a href="Vector_Markup_Language" title="Vector Markup Language">VML</a> oder <a href="Adobe_Flash" title="Adobe Flash">Flash</a>), ansonsten wird direkt eine SVG generiert. All das kann jedoch bedeuten, dass nicht alle von SVG gebotenen Möglichkeiten genutzt werden können. Es muss also nicht alles von einer Sprache in eine andere transformierbar sein oder von der verwendeten Bibliothek transformiert werden können, zusätzlich zu dem Problem, dass eine Interpretation der verwendeten Skriptsprache auch nicht notwendig komplett oder überhaupt verfügbar sein muss. Die Methode bietet sich also eher als vom Betrachter jeweils aktiv auswählbare Alternative an, nicht als Pauschallösung.

Mit <a href="Acid_(Browsertests)#Acid3" title="Acid (Browsertests)">Acid3</a> liegt ein Test vor, der Darstellungsprogramme in gewissem Rahmen darauf prüft, ob sie SVGs korrekt darstellen können. <a href="Apple_Safari" class="mw-redirect" title="Apple Safari">Safari</a> (4.0), <a href="Opera_(Browser)" title="Opera (Browser)">Opera</a> (10.0) und <a href="Google_Chrome" title="Google Chrome">Chrome</a> (4.0) erreichen in jenem Test seit 2009 die volle Punktzahl, <a href="Mozilla_Firefox" title="Mozilla Firefox">Mozilla Firefox</a> (4.0) seit 2011 und der <a href="Internet_Explorer" title="Internet Explorer">Internet Explorer</a> (10.0) seit 2012.

<div class="mw-heading mw-heading3"><h3 id="Interoperabilität_bei_Office-Software">Interoperabilität bei Office-Software</h3></div>

Der Import von SVG ist ab <a href="Microsoft_Office" title="Microsoft Office">Microsoft Office</a> 2016<a href="#cite_note-42">[38]</a> möglich und steht mittlerweile auf allen Plattformen zur Verfügung.<a href="#cite_note-43">[39]</a> Ebenso unterstützen <a href="LibreOffice" title="LibreOffice">LibreOffice</a> und <a href="Apache_OpenOffice" title="Apache OpenOffice">Apache OpenOffice</a> den Import von SVG.

<div class="mw-heading mw-heading3"><h3 id="Interpretation_durch_Suchmaschinen">Interpretation durch Suchmaschinen</h3></div>

Seit September 2010 berücksichtigt <a href="Google_Suche" class="mw-redirect" title="Google Suche">Google</a> SVG bei der Bildersuche.<a href="#cite_note-44">[40]</a> Damit ist SVG neben <a href="JPEG_File_Interchange_Format" title="JPEG File Interchange Format">JPEG</a>, <a href="Graphics_Interchange_Format" title="Graphics Interchange Format">GIF</a>, <a href="Portable_Network_Graphics" title="Portable Network Graphics">PNG</a>, <a href="Windows_Bitmap" title="Windows Bitmap">Bitmap</a> und <a href="WebP" title="WebP">WebP</a> eines von sechs <a href="Grafikformat" title="Grafikformat">Grafikformaten</a>, die Google berücksichtigt.<a href="#cite_note-45">[41]</a> Auch <a href="Bing_(Suchmaschine)" class="mw-redirect" title="Bing (Suchmaschine)">Bing</a> berücksichtigt mittlerweile SVG.

Auch für Suchmaschinen sind Textalternativen und von Programmen analysierbare strukturierte Metainformationen von besonderer Bedeutung, um Auskunft über den Inhalt einer Grafik geben zu können.

Die Möglichkeiten von SVG als XML-Format sind denen der genannten Rastergrafikformate gleichwertig oder überlegen und von Autoren zudem ohne spezielle Programme einfach zu ergänzen.

<div class="mw-heading mw-heading2"><h2 id="The_Graphical_Web">The Graphical Web</h2></div>

Von 2002 bis 2016 fand einmal jährlich die <a href="Tagung" title="Tagung">Konferenz</a> The Graphical Web statt, bei der in Vorträgen und Workshops aktuelle Entwicklungen im Umfeld von SVG vorgestellt wurden.

<ul><li><a href="Exeter" title="Exeter">Exeter</a>, Großbritannien, 1. bis 4. November 2016<a href="#cite_note-graphicalweb.org-46">[42]</a></li>

<li><a href="Pittsburgh" title="Pittsburgh">Pittsburgh</a>, USA, 23. bis 26. September 2015<a href="#cite_note-graphicalweb.org-46">[42]</a></li>

<li><a href="Winchester" title="Winchester">Winchester</a>, Großbritannien, 26. bis 30. August 2014<a href="#cite_note-graphicalweb.org-46">[42]</a></li>

<li><a href="San_Francisco" title="San Francisco">San Francisco</a>, USA, 21. bis 23. Oktober 2013<a href="#cite_note-svgopen.org-47">[43]</a></li>

<li><a href="Z%C3%BCrich" title="Zürich">Zürich</a>, Schweiz, 11. bis 14. September 2012<a href="#cite_note-svgopen.org-47">[43]</a></li>

<li><a href="Cambridge_(Massachusetts)" title="Cambridge (Massachusetts)">Cambridge</a>, USA, 17. Oktober bis 20. Oktober 2011<a href="#cite_note-svgopen.org-47">[43]</a></li>

<li><a href="Paris" title="Paris">Paris</a>, Frankreich, 30. August bis 1. September 2010<a href="#cite_note-svgopen.org-47">[43]</a></li>

<li><a href="Mountain_View_(Santa_Clara_County%2C_Kalifornien)" title="Mountain View (Santa Clara County, Kalifornien)">Mountain View</a>, USA, 2. bis 4. Oktober 2009<a href="#cite_note-svgopen.org-47">[43]</a></li>

<li><a href="N%C3%BCrnberg" title="Nürnberg">Nürnberg</a>, Deutschland, 26. bis 28. August 2008<a href="#cite_note-svgopen.org-47">[43]</a></li>

<li><a href="Minato_(Tokio)" title="Minato (Tokio)">Minato</a>, <a href="Tokio" title="Tokio">Tokio</a>, Japan, 4. bis 7. September 2007</li>

<li><a href="Victoria_(British_Columbia)" title="Victoria (British Columbia)">Victoria</a>, Kanada, 16. bis 19. Oktober 2006 (ausgefallen)</li>

<li><a href="Enschede" title="Enschede">Enschede</a>, Niederlande, 15. bis 18. August 2005</li>

<li><a href="Tokio" title="Tokio">Tokio</a>, Japan, 7. bis 10. September 2004</li>

<li><a href="Vancouver" title="Vancouver">Vancouver</a>, Kanada, 13. bis 18. Juli 2003</li>

<li><a href="Z%C3%BCrich" title="Zürich">Zürich</a>, Schweiz, 15. bis 17. Juli 2002</li></ul>

<div class="mw-heading mw-heading2"><h2 id="Siehe_auch">Siehe auch</h2></div>

<ul><li><a href="Grafiksoftware" title="Grafiksoftware">Grafiksoftware</a></li>

<li><a href="Grafikformat" title="Grafikformat">Grafikformat</a></li>

<li><a href="Dateikonverter" title="Dateikonverter">Dateikonverter</a></li></ul>

<div class="mw-heading mw-heading2"><h2 id="Literatur">Literatur</h2></div>

<ul><li>Alexander Adam: <cite style="font-style:italic">SVG, Scalable Vector Graphics</cite>. Franzis Verlag, 2002, ISBN 3-7723-6190-0.<span class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rfr_id=info:sid/de.wikipedia.org:Scalable+Vector+Graphics&rft.au=Alexander+Adam&rft.btitle=SVG%2C+Scalable+Vector+Graphics&rft.date=2002&rft.genre=book&rft.isbn=3772361900&rft.pub=Franzis+Verlag" style="display:none"> </li>

<li>Francis Hemsher: <cite class="lang" lang="en" dir="auto" style="font-style:italic">SVG Companion</cite>. 2011 (englisch, <a rel="nofollow" class="external text" href="http://search.barnesandnoble.com/books/e/2940013077256">Barnes & Noble E-Book</a>).<span class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rfr_id=info:sid/de.wikipedia.org:Scalable+Vector+Graphics&rft.au=Francis+Hemsher&rft.btitle=SVG+Companion&rft.date=2011&rft.genre=book" style="display:none"> </li>

<li>Marcel Salathé: <cite style="font-style:italic">SVG – Scalable Vector Graphics … für professionelle Einsteiger</cite>. Markt+Technik, München 2001, ISBN 3-8272-6188-0.<span class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rfr_id=info:sid/de.wikipedia.org:Scalable+Vector+Graphics&rft.au=Marcel+Salath%C3%A9&rft.btitle=SVG+-+Scalable+Vector+Graphics+%E2%80%A6+f%C3%BCr+professionelle+Einsteiger&rft.date=2001&rft.genre=book&rft.isbn=3827261880&rft.place=M%C3%BCnchen&rft.pub=Markt%2BTechnik" style="display:none"> </li>

<li>Helma Spona: <cite style="font-style:italic">SVG – Webgrafiken mit XML</cite>. vmi-Buch, 2001, ISBN 3-8266-7181-3 (<a rel="nofollow" class="external text" href="https://www.data2type.de/xml-xslt-xslfo/svg/">data2type.de</a>).<span class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rfr_id=info:sid/de.wikipedia.org:Scalable+Vector+Graphics&rft.au=Helma+Spona&rft.btitle=SVG+-+Webgrafiken+mit+XML&rft.date=2001&rft.genre=book&rft.isbn=3826671813&rft.pub=vmi-Buch" style="display:none"> </li></ul>

<div class="mw-heading mw-heading2"><h2 id="Weblinks">Weblinks</h2></div>

<div class="sisterproject" style="margin:0.1em 0 0 0;"><div class="noviewer" style="display:inline-block; line-height:10px; min-width:1.6em; text-align:center;" aria-hidden="true" role="presentation"></div><a href="https://de.wikibooks.org/wiki/SVG" class="extiw external" title="b:SVG">Wikibooks: SVG</a> – Lern- und Lehrmaterialien</div>

<div class="sisterproject" style="margin:0.1em 0 0 0;"><div class="noresize noviewer" style="display:inline-block; line-height:10px; min-width:1.6em; text-align:center;" aria-hidden="true" role="presentation"></div><a class="external text" href="https://commons.wikimedia.org/wiki/SVG_examples?uselang=de">Commons: SVG-Beispiele</a> – Album mit Bildern, Videos und Audiodateien</div>

<div class="sisterproject" style="margin:0.1em 0 0 0;"><div class="noresize noviewer" style="display:inline-block; line-height:10px; min-width:1.6em; text-align:center;" aria-hidden="true" role="presentation"></div><a class="external text" href="https://commons.wikimedia.org/wiki/Category:Created_with_Text_Editor?uselang=de">Commons: Hand-SVGs</a> – Sammlung von Grafiken, die mit Text-Editoren manuell erstellt wurden</div>

<div class="sisterproject" style="margin:0.1em 0 0 0;"><div class="noresize noviewer" style="display:inline-block; line-height:10px; min-width:1.6em; text-align:center;" aria-hidden="true" role="presentation"></div><a class="external text" href="https://commons.wikimedia.org/wiki/Category:SVG_Simplified?uselang=de">Commons: Vereinfachungen</a> – Beispiele für manuell vereinfachte Grafiken</div>

<ul><li><a rel="nofollow" class="external text" href="https://www.w3.org/TR/SVG11/">Scalable Vector Graphics (SVG) Specification</a> beim <a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">World Wide Web Consortium</a> (englisch)</li>

<li><a rel="nofollow" class="external text" href="https://www.w3.org/TR/SVGMobile12/">Scalable Vector Graphics Tiny (SVGT) Specification</a> beim World Wide Web Consortium (englisch)</li>

<li><a rel="nofollow" class="external text" href="https://www.w3.org/TR/SVG11/propidx.html">Übersicht über die möglichen Eigenschaften der Elemente</a> beim World Wide Web Consortium (englisch)</li>

<li><a rel="nofollow" class="external text" href="https://svg.tutorial.aptico.de/">Tutorial zum Thema SVG mit Beispieldateien</a></li>

<li><a rel="nofollow" class="external text" href="https://caniuse.com/#cats=SVG">Übersicht der SVG-Unterstützung in verbreiteten Browsern</a> (englisch)</li>

<li><a rel="nofollow" class="external text" href="https://curlie.org/World/Deutsch/Computer/Datenformate/Markup_Languages/SVG/">Linkkatalog zum Thema SVG</a> bei curlie.org (ehemals <a href="DMOZ" title="DMOZ">DMOZ</a>)</li></ul>

<div class="mw-heading mw-heading2"><h2 id="Einzelnachweise">Einzelnachweise</h2></div>

<li id="cite_note-1"><a href="#cite_ref-1">↑</a> <a rel="nofollow" class="external text" href="https://www.w3.org/TR/SVGMobile12/mimereg.html">Media Type registration for image/svg+xml – SVG Tiny 1.2.</a> Abgerufen am 24. Mai 2024.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=Media+Type+registration+for+image%2Fsvg%2Bxml+%E2%80%93+SVG+Tiny+1.2&rft.description=Media+Type+registration+for+image%2Fsvg%2Bxml+%E2%80%93+SVG+Tiny+1.2&rft.identifier=https%3A%2F%2Fwww.w3.org%2FTR%2FSVGMobile12%2Fmimereg.html">

</li>

<li id="cite_note-2"><a href="#cite_ref-2">↑</a> <a rel="nofollow" class="external text" href="https://caniuse.com/">Can I use... Support tables for HTML5, CSS3, etc.</a> Abgerufen am 27. Februar 2021.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=Can+I+use...+Support+tables+for+HTML5%2C+CSS3%2C+etc&rft.description=Can+I+use...+Support+tables+for+HTML5%2C+CSS3%2C+etc&rft.identifier=https%3A%2F%2Fcaniuse.com%2F">

</li>

<li id="cite_note-3"><a href="#cite_ref-3">↑</a> Daniel Geiser: <a rel="nofollow" class="external text" href="https://www.new-time.ch/die-vor-und-nachteile-des-svg-formats-im-responsiven-webdesign/">Die Vor- und Nachteile des SVG-Formats im responsiven Webdesign.</a> new time design Scherrer & Grasso, 30. September 2015, abgerufen am 12. Januar 2019.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=Die+Vor-+und+Nachteile+des+SVG-Formats+im+responsiven+Webdesign&rft.description=Die+Vor-+und+Nachteile+des+SVG-Formats+im+responsiven+Webdesign&rft.identifier=https%3A%2F%2Fwww.new-time.ch%2Fdie-vor-und-nachteile-des-svg-formats-im-responsiven-webdesign%2F&rft.creator=Daniel+Geiser&rft.publisher=new+time+design+Scherrer+%26+Grasso&rft.date=2015-09-30">

</li>

<li id="cite_note-4"><a href="#cite_ref-4">↑</a> <a rel="nofollow" class="external text" href="https://www.w3.org/TR/SVG/intro.html">Introduction — SVG 2.</a> Abgerufen am 24. Mai 2024.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=Introduction+%E2%80%94+SVG+2&rft.description=Introduction+%E2%80%94+SVG+2&rft.identifier=https%3A%2F%2Fwww.w3.org%2FTR%2FSVG%2Fintro.html">

</li>

<li id="cite_note-5"><a href="#cite_ref-5">↑</a> <a rel="nofollow" class="external text" href="https://www.w3.org/TR/1999/WD-SVG-19990211/reqts.html">SVG Requirements.</a> Abgerufen am 27. Februar 2021.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=SVG+Requirements&rft.description=SVG+Requirements&rft.identifier=https%3A%2F%2Fwww.w3.org%2FTR%2F1999%2FWD-SVG-19990211%2Freqts.html">

</li>

<li id="cite_note-6"><a href="#cite_ref-6">↑</a> <a rel="nofollow" class="external text" href="https://www.w3.org/TR/2001/REC-SVG-20010904/index.html">Scalable Vector Graphics (SVG) 1.0 Specification.</a> Abgerufen am 27. Februar 2021.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=Scalable+Vector+Graphics+%28SVG%29+1.0+Specification&rft.description=Scalable+Vector+Graphics+%28SVG%29+1.0+Specification&rft.identifier=https%3A%2F%2Fwww.w3.org%2FTR%2F2001%2FREC-SVG-20010904%2Findex.html">

</li>

<li id="cite_note-7"><a href="#cite_ref-7">↑</a> kexugit: <a rel="nofollow" class="external text" href="https://learn.microsoft.com/en-us/archive/blogs/ie/">IEBlog.</a> 17. Juli 2020, abgerufen am 24. Mai 2024 (amerikanisches Englisch).<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=IEBlog&rft.description=IEBlog&rft.identifier=https%3A%2F%2Flearn.microsoft.com%2Fen-us%2Farchive%2Fblogs%2Fie%2F&rft.creator=kexugit&rft.date=2020-07-17&rft.language=en-us">

</li>

<li id="cite_note-8"><a href="#cite_ref-8">↑</a> <a rel="nofollow" class="external text" href="https://www.w3.org/TR/SVGMobileReqs">SVG Mobile Requirements.</a> Abgerufen am 24. Mai 2024.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=SVG+Mobile+Requirements&rft.description=SVG+Mobile+Requirements&rft.identifier=https%3A%2F%2Fwww.w3.org%2FTR%2FSVGMobileReqs">

</li>

<li id="cite_note-9"><a href="#cite_ref-9">↑</a> <a rel="nofollow" class="external text" href="https://www.w3.org/TR/2003/REC-SVG11-20030114/">Scalable Vector Graphics (SVG) 1.1 Specification.</a> Abgerufen am 24. Mai 2024.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=Scalable+Vector+Graphics+%28SVG%29+1.1+Specification&rft.description=Scalable+Vector+Graphics+%28SVG%29+1.1+Specification&rft.identifier=https%3A%2F%2Fwww.w3.org%2FTR%2F2003%2FREC-SVG11-20030114%2F">

</li>

<li id="cite_note-10"><a href="#cite_ref-10">↑</a> <a rel="nofollow" class="external text" href="https://www.w3.org/TR/2003/REC-SVGMobile-20030114/">Mobile SVG Profiles: SVG Tiny and SVG Basic.</a> Abgerufen am 24. Mai 2024.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=Mobile+SVG+Profiles%3A+SVG+Tiny+and+SVG+Basic&rft.description=Mobile+SVG+Profiles%3A+SVG+Tiny+and+SVG+Basic&rft.identifier=https%3A%2F%2Fwww.w3.org%2FTR%2F2003%2FREC-SVGMobile-20030114%2F">

</li>

<li id="cite_note-11"><a href="#cite_ref-11">↑</a> <a rel="nofollow" class="external text" href="https://www.w3.org/TR/2011/REC-SVG11-20110816/">Scalable Vector Graphics (SVG) 1.1 (Second Edition).</a> Abgerufen am 24. Mai 2024.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=Scalable+Vector+Graphics+%28SVG%29+1.1+%28Second+Edition%29&rft.description=Scalable+Vector+Graphics+%28SVG%29+1.1+%28Second+Edition%29&rft.identifier=https%3A%2F%2Fwww.w3.org%2FTR%2F2011%2FREC-SVG11-20110816%2F">

</li>

<li id="cite_note-12"><a href="#cite_ref-12">↑</a> <a rel="nofollow" class="external text" href="https://www.w3.org/TR/SVG12/">Scalable Vector Graphics (SVG) Full 1.2 Specification.</a> Abgerufen am 24. Mai 2024.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=Scalable+Vector+Graphics+%28SVG%29+Full+1.2+Specification&rft.description=Scalable+Vector+Graphics+%28SVG%29+Full+1.2+Specification&rft.identifier=https%3A%2F%2Fwww.w3.org%2FTR%2FSVG12%2F">

</li>

<li id="cite_note-13"><a href="#cite_ref-13">↑</a> <a rel="nofollow" class="external text" href="https://www.w3.org/TR/2008/REC-SVGTiny12-20081222/">Scalable Vector Graphics (SVG) Tiny 1.2 Specification.</a> Abgerufen am 24. Mai 2024.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=Scalable+Vector+Graphics+%28SVG%29+Tiny+1.2+Specification&rft.description=Scalable+Vector+Graphics+%28SVG%29+Tiny+1.2+Specification&rft.identifier=https%3A%2F%2Fwww.w3.org%2FTR%2F2008%2FREC-SVGTiny12-20081222%2F">

</li>

<li id="cite_note-14"><a href="#cite_ref-14">↑</a> <a rel="nofollow" class="external text" href="http://www.w3.org/Graphics/SVG/WG/wiki/index.php?title=SVG2_Planning_Page&oldid=6876">SVG2 Planning Page.</a> Abgerufen am 30. Januar 2015.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=SVG2+Planning+Page&rft.description=SVG2+Planning+Page&rft.identifier=http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2FWG%2Fwiki%2Findex.php%3Ftitle%3DSVG2_Planning_Page%26oldid%3D6876">

</li>

<li id="cite_note-15"><a href="#cite_ref-15">↑</a> <a rel="nofollow" class="external text" href="https://www.w3.org/Graphics/SVG/WG/wiki/SVG2_Requirements_Commitments">SVG2 Requirements Commitments.</a> Abgerufen am 8. Juli 2015.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=SVG2+Requirements+Commitments&rft.description=SVG2+Requirements+Commitments&rft.identifier=https%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2FWG%2Fwiki%2FSVG2_Requirements_Commitments">

</li>

<li id="cite_note-16"><a href="#cite_ref-16">↑</a> <a rel="nofollow" class="external text" href="https://www.w3.org/TR/SVG2/">Scalable Vector Graphics (SVG) 2.</a> Abgerufen am 24. Mai 2024.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=Scalable+Vector+Graphics+%28SVG%29+2&rft.description=Scalable+Vector+Graphics+%28SVG%29+2&rft.identifier=https%3A%2F%2Fwww.w3.org%2FTR%2FSVG2%2F">

</li>

<li id="cite_note-17"><a href="#cite_ref-17">↑</a> <a rel="nofollow" class="external text" href="https://www.w3.org/TR/SVG11/intro.html#NamespaceAndDTDIdentifiers">Introduction – SVG 1.1 (Second Edition).</a> Abgerufen am 24. Mai 2024.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=Introduction+%E2%80%93+SVG+1.1+%28Second+Edition%29&rft.description=Introduction+%E2%80%93+SVG+1.1+%28Second+Edition%29&rft.identifier=https%3A%2F%2Fwww.w3.org%2FTR%2FSVG11%2Fintro.html%23NamespaceAndDTDIdentifiers">

</li>

<li id="cite_note-18"><a href="#cite_ref-18">↑</a> <a rel="nofollow" class="external text" href="https://www.w3.org/TR/SVG11/conform.html#ConformingSVGDocuments">Conformance Criteria – SVG 1.1 (Second Edition).</a> Abgerufen am 24. Mai 2024.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=Conformance+Criteria+%E2%80%93+SVG+1.1+%28Second+Edition%29&rft.description=Conformance+Criteria+%E2%80%93+SVG+1.1+%28Second+Edition%29&rft.identifier=https%3A%2F%2Fwww.w3.org%2FTR%2FSVG11%2Fconform.html%23ConformingSVGDocuments">

</li>

<li id="cite_note-19"><a href="#cite_ref-19">↑</a> <a rel="nofollow" class="external text" href="https://www.w3.org/TR/SVG11/coords.html#ExamplePreserveAspectRatio">Coordinate Systems, Transformations and Units – SVG 1.1 (Second Edition).</a> Abgerufen am 24. Mai 2024.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=Coordinate+Systems%2C+Transformations+and+Units+%E2%80%93+SVG+1.1+%28Second+Edition%29&rft.description=Coordinate+Systems%2C+Transformations+and+Units+%E2%80%93+SVG+1.1+%28Second+Edition%29&rft.identifier=https%3A%2F%2Fwww.w3.org%2FTR%2FSVG11%2Fcoords.html%23ExamplePreserveAspectRatio">

</li>

<li id="cite_note-coord-20"><a href="#cite_ref-coord_20-0">↑</a> <a rel="nofollow" class="external text" href="https://www.w3.org/TR/SVG11/coords.html#Units">SVG – Coordinate Systems, Transformations and Units.</a> W3C, 14. Januar 2003, abgerufen am 10. September 2009.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=SVG+%E2%80%93+Coordinate+Systems%2C+Transformations+and+Units&rft.description=SVG+%E2%80%93+Coordinate+Systems%2C+Transformations+and+Units&rft.identifier=https%3A%2F%2Fwww.w3.org%2FTR%2FSVG11%2Fcoords.html%23Units&rft.publisher=W3C&rft.date=2003-01-14">

</li>

<li id="cite_note-einh-21"><a href="#cite_ref-einh_21-0">↑</a> <a rel="nofollow" class="external text" href="https://www.css4you.de/einheiten.html">SVG – Basiseinheiten.</a> CSS4You, 20. Oktober 2006, abgerufen am 3. September 2009.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=SVG+%E2%80%93+Basiseinheiten&rft.description=SVG+%E2%80%93+Basiseinheiten&rft.identifier=https%3A%2F%2Fwww.css4you.de%2Feinheiten.html&rft.publisher=CSS4You&rft.date=2006-10-20">

</li>

<li id="cite_note-styling-26"><a href="#cite_ref-styling_26-0">↑</a> <a rel="nofollow" class="external text" href="https://www.w3.org/TR/SVG11/styling.html">SVG – Styling.</a> W3C, 14. Januar 2003, abgerufen am 10. September 2009.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=SVG+%E2%80%93+Styling&rft.description=SVG+%E2%80%93+Styling&rft.identifier=https%3A%2F%2Fwww.w3.org%2FTR%2FSVG11%2Fstyling.html&rft.publisher=W3C&rft.date=2003-01-14">

</li>

<li id="cite_note-transf-27"><a href="#cite_ref-transf_27-0">↑</a> <a rel="nofollow" class="external text" href="https://www.w3.org/TR/SVG/coords.html#TransformAttribute">SVG – The transform attribute.</a> Abgerufen am 28. August 2009.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=SVG+%E2%80%93+The+transform+attribute&rft.description=SVG+%E2%80%93+The+transform+attribute&rft.identifier=https%3A%2F%2Fwww.w3.org%2FTR%2FSVG%2Fcoords.html%23TransformAttribute">

</li>

<li id="cite_note-28"><a href="#cite_ref-28">↑</a> <a rel="nofollow" class="external text" href="https://code.google.com/archive/p/svg-edit">Google Code Archive - Long-term storage for Google Code Project Hosting.</a> Abgerufen am 24. Mai 2024.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=Google+Code+Archive+-+Long-term+storage+for+Google+Code+Project+Hosting.&rft.description=Google+Code+Archive+-+Long-term+storage+for+Google+Code+Project+Hosting.&rft.identifier=https%3A%2F%2Fcode.google.com%2Farchive%2Fp%2Fsvg-edit">

</li>

<li id="cite_note-29"><a href="#cite_ref-29">↑</a> <a rel="nofollow" class="external text" href="https://developers.google.com/chart/interactive/docs?hl=de">Google Charts verwenden.</a> Abgerufen am 24. Mai 2024.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=Google+Charts+verwenden&rft.description=Google+Charts+verwenden&rft.identifier=https%3A%2F%2Fdevelopers.google.com%2Fchart%2Finteractive%2Fdocs%3Fhl%3Dde">

</li>

<li id="cite_note-30"><a href="#cite_ref-30">↑</a> uismedia, Bad Schussenried: <a rel="nofollow" class="external text" href="https://www.mappetizer.de/de/index.html">Mappetizer Web Mapping | Der Weg Ihrer ArcGIS Karten ins WWW | GIS - SIG - SIT | Geographische Informationssysteme - ArcGIS Extension.</a> Abgerufen am 24. Mai 2024.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=Mappetizer+Web+Mapping+%7C+Der+Weg+Ihrer+ArcGIS+Karten+ins+WWW+%7C+GIS+-+SIG+-+SIT+%7C+Geographische+Informationssysteme+-+ArcGIS+Extension&rft.description=Mappetizer+Web+Mapping+%7C+Der+Weg+Ihrer+ArcGIS+Karten+ins+WWW+%7C+GIS+-+SIG+-+SIT+%7C+Geographische+Informationssysteme+-+ArcGIS+Extension&rft.identifier=https%3A%2F%2Fwww.mappetizer.de%2Fde%2Findex.html&rft.creator=uismedia%2C+Bad+Schussenried&rft.language=de">

</li>

<li id="cite_note-31"><a href="#cite_ref-31">↑</a> <a rel="nofollow" class="external text" href="https://www.w3.org/TR/SVG/svgdom.html">Spezifikationen des SVG Document Object Models in Version 1.1</a> und des <a rel="nofollow" class="external text" href="https://www.w3.org/TR/SVGTiny12/svgudom.html">SVG Micro DOM in Version 1.2</a>

</li>

<li id="cite_note-32"><a href="#cite_ref-32">↑</a> <a rel="nofollow" class="external text" href="https://www.w3.org/TR/SVGTiny12/#minitoc">Inhaltsverzeichnis der SVG Tiny 1.2 Spezifikationen</a>

</li>

<li id="cite_note-profiles-33"><a href="#cite_ref-profiles_33-0">↑</a> <a rel="nofollow" class="external text" href="https://www.w3.org/TR/SVGMobile/">Mobile SVG Profiles: SVG Tiny and SVG Basic.</a> W3C, abgerufen am 29. August 2009.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=Mobile+SVG+Profiles%3A+SVG+Tiny+and+SVG+Basic&rft.description=Mobile+SVG+Profiles%3A+SVG+Tiny+and+SVG+Basic&rft.identifier=https%3A%2F%2Fwww.w3.org%2FTR%2FSVGMobile%2F&rft.publisher=W3C">

</li>

<li id="cite_note-34"><a href="#cite_ref-34">↑</a> <a rel="nofollow" class="external text" href="https://affinity.serif.com/de/designer/">Affinity Designer – Professionelle Software für Grafikdesign.</a> Abgerufen am 6. Februar 2018 (deutsch).<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=Affinity+Designer+%E2%80%93+Professionelle+Software+f%C3%BCr+Grafikdesign&rft.description=Affinity+Designer+%E2%80%93+Professionelle+Software+f%C3%BCr+Grafikdesign&rft.identifier=https%3A%2F%2Faffinity.serif.com%2Fde%2Fdesigner%2F&rft.language=de-DE">

</li>

<li id="cite_note-35"><a href="#cite_ref-35">↑</a> <a rel="nofollow" class="external text" href="https://aphalina.com/">Aphalina Designer</a>, Aphalina Homepage

</li>

<li id="cite_note-36"><a href="#cite_ref-36">↑</a> Kevin Reuß: <a rel="nofollow" class="external text" href="https://codemypic.de/">Bildeditor.</a> In: CodeMyPic - Ein didaktischer Bildeditor zum erlernen einfacher Bildkodierungen. Kevin Reuß, 1. März 2019, abgerufen am 16. Mai 2022.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=Bildeditor&rft.description=Bildeditor&rft.identifier=https%3A%2F%2Fcodemypic.de%2F&rft.creator=Kevin+Reu%C3%9F&rft.publisher=Kevin+Reu%C3%9F&rft.date=2019-03-01&rft.language=de">

</li>

<li id="cite_note-37"><a href="#cite_ref-37">↑</a> <a rel="nofollow" class="external text" href="https://informatik.schule.de/comments.php?material_id=473">informatik.schule.de - Portal fuer den Informatikunterricht.</a> Abgerufen am 16. Mai 2022.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=informatik.schule.de+-+Portal+fuer+den+Informatikunterricht&rft.description=informatik.schule.de+-+Portal+fuer+den+Informatikunterricht&rft.identifier=https%3A%2F%2Finformatik.schule.de%2Fcomments.php%3Fmaterial_id%3D473">

</li>

<li id="cite_note-38"><a href="#cite_ref-38">↑</a> <a rel="nofollow" class="external text" href="https://github.com/SVG-Edit/svgedit">SVG-edit</a> auf <a href="GitHub" title="GitHub">GitHub</a>

</li>

<li id="cite_note-39"><a href="#cite_ref-39">↑</a> <a rel="nofollow" class="external text" href="https://www.codedread.com/svg-support.php">SVG Test Suite results.</a> codedread.com, 24. März 2011, abgerufen am 27. März 2011 (englisch).<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=SVG+Test+Suite+results&rft.description=SVG+Test+Suite+results&rft.identifier=https%3A%2F%2Fwww.codedread.com%2Fsvg-support.php&rft.publisher=codedread.com&rft.date=2011-03-24&rft.language=en">

</li>

<li id="cite_note-40"><a href="#cite_ref-40">↑</a> <a rel="nofollow" class="external text" href="https://caniuse.com/svg">Compatibility table for support of SVG in desktop and mobile browsers.</a> Abgerufen am 20. Januar 2013.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=Compatibility+table+for+support+of+SVG+in+desktop+and+mobile+browsers.&rft.description=Compatibility+table+for+support+of+SVG+in+desktop+and+mobile+browsers.&rft.identifier=https%3A%2F%2Fcaniuse.com%2Fsvg">

</li>

<li id="cite_note-41"><a href="#cite_ref-41">↑</a> <a rel="nofollow" class="external text" href="https://www.savarese.com/software/svgplugin/">Ssrc SVG: SVG Plugin for Internet Explorer.</a> Abgerufen am 27. Februar 2021.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=Ssrc+SVG%3A+SVG+Plugin+for+Internet+Explorer&rft.description=Ssrc+SVG%3A+SVG+Plugin+for+Internet+Explorer&rft.identifier=https%3A%2F%2Fwww.savarese.com%2Fsoftware%2Fsvgplugin%2F">

</li>

<li id="cite_note-42"><a href="#cite_ref-42">↑</a> Microsoft Docs: <a rel="nofollow" class="external text" href="https://docs.microsoft.com/de-de/officeupdates/monthly-channel-2016">Anmerkungen zur Version für monatliche Kanal Veröffentlichungen in 2016 - Office release notes.</a> Abgerufen am 27. Februar 2021 (deutsch).<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=Anmerkungen+zur+Version+f%C3%BCr+monatliche+Kanal+Ver%C3%B6ffentlichungen+in+2016+-+Office+release+notes&rft.description=Anmerkungen+zur+Version+f%C3%BCr+monatliche+Kanal+Ver%C3%B6ffentlichungen+in+2016+-+Office+release+notes&rft.identifier=https%3A%2F%2Fdocs.microsoft.com%2Fde-de%2Fofficeupdates%2Fmonthly-channel-2016&rft.creator=Microsoft+Docs&rft.language=de-DE">

</li>

<li id="cite_note-43"><a href="#cite_ref-43">↑</a> <a rel="nofollow" class="external text" href="https://support.microsoft.com/en-us/topic/edit-svg-images-in-microsoft-office-365-69f29d39-194a-4072-8c35-dbe5e7ea528c?ui=en-us&rs=en-us&ad=us">Edit SVG images in Microsoft Office 365.</a> Abgerufen am 27. Februar 2021.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=Edit+SVG+images+in+Microsoft+Office+365&rft.description=Edit+SVG+images+in+Microsoft+Office+365&rft.identifier=https%3A%2F%2Fsupport.microsoft.com%2Fen-us%2Ftopic%2Fedit-svg-images-in-microsoft-office-365-69f29d39-194a-4072-8c35-dbe5e7ea528c%3Fui%3Den-us%26rs%3Den-us%26ad%3Dus">

</li>

<li id="cite_note-44"><a href="#cite_ref-44">↑</a> <a rel="nofollow" class="external text" href="http://www.at-web.de/blog/20100902/google-indexiert-svg-grafiken.htm">Google indexiert SVG Grafiken.</a> In: @-web. 2. September 2010, abgerufen am 27. Februar 2021.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=Google+indexiert+SVG+Grafiken&rft.description=Google+indexiert+SVG+Grafiken&rft.identifier=http%3A%2F%2Fwww.at-web.de%2Fblog%2F20100902%2Fgoogle-indexiert-svg-grafiken.htm&rft.date=2010-09-02">

</li>

<li id="cite_note-45"><a href="#cite_ref-45">↑</a> <a rel="nofollow" class="external text" href="http://www.at-web.de/blog/20120514/rankingkriterien-fur-die-bildersuche.htm">Rankingkriterien für die Bildersuche.</a> In: @-web. 14. Mai 2012, abgerufen am 27. Februar 2021.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=Rankingkriterien+f%C3%BCr+die+Bildersuche&rft.description=Rankingkriterien+f%C3%BCr+die+Bildersuche&rft.identifier=http%3A%2F%2Fwww.at-web.de%2Fblog%2F20120514%2Frankingkriterien-fur-die-bildersuche.htm&rft.date=2012-05-14">

</li>

<li id="cite_note-graphicalweb.org-46">↑ <a href="#cite_ref-graphicalweb.org_46-0">a</a> <a href="#cite_ref-graphicalweb.org_46-1">b</a> <a href="#cite_ref-graphicalweb.org_46-2">c</a> <a rel="nofollow" class="external text" href="https://graphicalweb.org/">G&H_web.</a> 14. Februar 2024, abgerufen am 24. Mai 2024 (amerikanisches Englisch).<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=G%26H_web&rft.description=G%26H_web&rft.identifier=https%3A%2F%2Fgraphicalweb.org%2F&rft.date=2024-02-14&rft.language=en-US">

</li>

<li id="cite_note-svgopen.org-47">↑ <a href="#cite_ref-svgopen.org_47-0">a</a> <a href="#cite_ref-svgopen.org_47-1">b</a> <a href="#cite_ref-svgopen.org_47-2">c</a> <a href="#cite_ref-svgopen.org_47-3">d</a> <a href="#cite_ref-svgopen.org_47-4">e</a> <a href="#cite_ref-svgopen.org_47-5">f</a> <a rel="nofollow" class="external text" href="https://www.svgopen.org/">SVG OPEN.</a> 3. Mai 2024, abgerufen am 24. Mai 2024 (französisch).<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AScalable+Vector+Graphics&rft.title=SVG+OPEN&rft.description=SVG+OPEN&rft.identifier=https%3A%2F%2Fwww.svgopen.org%2F&rft.date=2024-05-03&rft.language=fr">

</li>

</ol></div>

/* start https://de.wikipedia.org/ */

.mw-parser-output table.erw-nav-zebra>tbody>:nth-child(odd){background-color:var(--dewiki-hintergrundfarbe-basis)}.mw-parser-output .erw-nav-farbschema-blau .erw-nav-leiste{background-color:#f5f5f5}.mw-parser-output .erw-nav-farbschema-blau .erw-nav-gruppe{background-color:#e5ecf2}.mw-parser-output .erw-nav-farbschema-grau .erw-nav-leiste,.mw-parser-output .erw-nav-farbschema-grau .erw-nav-gruppe{background-color:#ececec}.mw-parser-output .erweiterte-navigationsleiste .klappleiste-inhalt>.wikitable>*>tr{border-top:2px solid #fdfdfd!important;border-bottom:2px solid #fdfdfd!important}@media screen{html.skin-theme-clientpref-night .mw-parser-output .erw-nav-farbschema-blau .erw-nav-leiste,html.skin-theme-clientpref-night .mw-parser-output .erw-nav-farbschema-blau .erw-nav-gruppe,html.skin-theme-clientpref-night .mw-parser-output .erw-nav-farbschema-grau .erw-nav-leiste,html.skin-theme-clientpref-night .mw-parser-output .erw-nav-farbschema-grau .erw-nav-gruppe{background-color:#202122}html.skin-theme-clientpref-night .mw-parser-output .erweiterte-navigationsleiste .klappleiste-inhalt .wikitable tr,html.skin-theme-clientpref-night .mw-parser-output .erweiterte-navigationsleiste .klappleiste-inhalt .wikitable td{border-color:#101418!important}html.skin-theme-clientpref-night .mw-parser-output .erw-nav-bild span[typeof="mw:File"] img{background-color:#c8ccd1}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .erw-nav-farbschema-blau .erw-nav-leiste,html.skin-theme-clientpref-os .mw-parser-output .erw-nav-farbschema-blau .erw-nav-gruppe,html.skin-theme-clientpref-os .mw-parser-output .erw-nav-farbschema-grau .erw-nav-leiste,html.skin-theme-clientpref-os .mw-parser-output .erw-nav-farbschema-grau .erw-nav-gruppe{background-color:#202122}html.skin-theme-clientpref-os .mw-parser-output .erweiterte-navigationsleiste .klappleiste-inhalt .wikitable tr,html.skin-theme-clientpref-os .mw-parser-output .erweiterte-navigationsleiste .klappleiste-inhalt .wikitable td{border-color:#101418!important}html.skin-theme-clientpref-os .mw-parser-output .erw-nav-bild span[typeof="mw:File"] img{background-color:#c8ccd1}}.mw-parser-output .erweiterte-navigationsleiste .hlist .wikitable{border-top:0px!important;border-bottom:0px!important;margin-top:0!important;margin-bottom:0!important}.mw-parser-output .erweiterte-navigationsleiste .hlist .wikitable tr:first-of-type td{border-top:0px!important}.mw-parser-output .erweiterte-navigationsleiste .hlist .wikitable tr:last-of-type td{border-bottom:0px!important}

/* end https://de.wikipedia.org/ */

</style><style data-mw-deduplicate="TemplateStyles:r260755238">

/* start https://de.wikipedia.org/ */

.mw-parser-output div.klappleiste{border:1px solid var(--dewiki-rahmenfarbe1);clear:both;font-size:95%;box-sizing:border-box;margin-top:1.5em;padding:2px}.mw-parser-output div.klappleiste:after{clear:both;content:"";display:block}.mw-parser-output div.klappleiste-bild{float:left;padding:2px}.mw-parser-output div.klappleiste-kopf{background:var(--dewiki-hintergrundfarbe5);color:var(--color-base,#202122);text-align:center;font-weight:bold}.mw-parser-output div.klappleiste.mw-collapsed .klappleiste-bild{display:none}.mw-parser-output div.klappleiste+div.klappleiste,.mw-parser-output div.klappleiste+link+div.klappleiste,.mw-parser-output div.klappleiste+link+link+div.klappleiste,.mw-parser-output div.klappleiste+link+style+div.klappleiste,.mw-parser-output div.klappleiste+style+div.klappleiste,.mw-parser-output div.klappleiste+style+style+div.klappleiste,.mw-parser-output div.klappleiste+style+link+div.klappleiste{margin-top:-1px}@media screen{html.skin-theme-clientpref-night .mw-parser-output .klappleiste-bild span[typeof="mw:File"]:not(.skin-invert-image) img{background-color:#c8ccd1}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .klappleiste-bild span[typeof="mw:File"]:not(.skin-invert-image) img{background-color:#c8ccd1}}

/* end https://de.wikipedia.org/ */

</style>

<div class="klappleiste-kopf">Standards des <a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">World Wide Web Consortiums</a> (W3C)<div class="erweiterte-navigationsleiste-quicklinks" style="float:left; font-weight:normal; font-size:75%; margin-left:1em; margin-right:2em; display:none;">V – D</div></div>

<td class="erw-nav-gruppe" style="white-space: nowrap;text-align: right;border: 1px solid transparent;border-top: 1px solid #FFF;border-bottom: 2px solid #FFF;padding: 0 1em;">Empfehlungen

</td>

<a href="ActivityPub" title="ActivityPub">ActivityPub</a> | <a href="Accessible_Rich_Internet_Applications" title="Accessible Rich Internet Applications">ARIA</a> | <a href="Canonical_XML" title="Canonical XML">Canonical XML</a> | <a href="Compound_Document_Formats" title="Compound Document Formats">CDF</a> | <a href="Cascading_Style_Sheets" title="Cascading Style Sheets">CSS</a> | <a href="Document_Object_Model" title="Document Object Model">DOM</a> | <a href="W3C_Geolocation_API" title="W3C Geolocation API">Geolocation API</a> | <a href="Hypertext_Markup_Language" title="Hypertext Markup Language">HTML</a> | <a href="HTML5" title="HTML5">HTML5</a> | <a href="InkML" title="InkML">InkML</a> | <a href="Internationalization_Tag_Set" title="Internationalization Tag Set">ITS</a> | <a href="JSON-LD" title="JSON-LD">JSON-LD</a> | <a href="Mathematical_Markup_Language" title="Mathematical Markup Language">MathML</a> | <a href="Web_Ontology_Language" title="Web Ontology Language">OWL</a> | <a href="Platform_for_Privacy_Preferences_Project" title="Platform for Privacy Preferences Project">P3P</a> | PLS | <a href="Portable_Network_Graphics" title="Portable Network Graphics">PNG</a> | <a href="Resource_Description_Framework" title="Resource Description Framework">RDF</a> | <a href="RDF-Schema" title="RDF-Schema">RDF-Schema</a> | <a href="Rule_Interchange_Format" title="Rule Interchange Format">RIF</a> | <a href="SCXML" title="SCXML">SCXML</a> | <a href="Semantic_Interpretation_for_Speech_Recognition" title="Semantic Interpretation for Speech Recognition">SISR</a> | <a href="Simple_Knowledge_Organisation_System" title="Simple Knowledge Organisation System">SKOS</a> | <a href="Synchronized_Multimedia_Integration_Language" title="Synchronized Multimedia Integration Language">SMIL</a> | <a href="SOAP" title="SOAP">SOAP</a> | <a href="Speech_Recognition_Grammar_Specification" title="Speech Recognition Grammar Specification">SRGS</a> | <a href="Speech_Synthesis_Markup_Language" title="Speech Synthesis Markup Language">SSML</a> | <a class="mw-selflink selflink">SVG</a> | <a href="SPARQL" title="SPARQL">SPARQL</a> | <a href="Timed_Text" title="Timed Text">Timed Text</a> | <a href="Turtle_(Syntax)" title="Turtle (Syntax)">Turtle</a> | <a href="VoiceXML" title="VoiceXML">VoiceXML</a> | <a href="Web_Services_Description_Language" title="Web Services Description Language">WSDL</a> | <a href="XForms" title="XForms">XForms</a> | <a href="Extensible_Hypertext_Markup_Language" title="Extensible Hypertext Markup Language">XHTML</a> | <a href="RDFa" title="RDFa">XHTML+RDFa</a> | <a href="XInclude" title="XInclude">XInclude</a> | <a href="XLink_(Syntax)" title="XLink (Syntax)">XLink</a> | <a href="Extensible_Markup_Language" title="Extensible Markup Language">XML</a> | <a href="XML_Base" title="XML Base">XML Base</a> | <a href="XML-Encryption" title="XML-Encryption">XML-Encryption</a> | <a href="XML_Events" title="XML Events">XML Events</a> | <a href="XML_Information_Set" title="XML Information Set">XML Information Set</a> | <a href="Namensraum_(XML)" title="Namensraum (XML)">XML Namespace</a> | <a href="XML_Schema" title="XML Schema">XML Schema</a> | <a href="XML_Signature" title="XML Signature">XML Signature</a> | <a href="XPath" title="XPath">XPath</a> | <a href="XPointer" title="XPointer">XPointer</a> | <a href="XProc" title="XProc">XProc</a> | <a href="XQuery" title="XQuery">XQuery</a> | <a href="Extensible_Stylesheet_Language" title="Extensible Stylesheet Language">XSL</a> | <a href="Extensible_Stylesheet_Language_%E2%80%93_Formatting_Objects" title="Extensible Stylesheet Language – Formatting Objects">XSL-FO</a> | <a href="XSL_Transformation" title="XSL Transformation">XSLT</a> (Elemente)

</td>

</td></tr>

<tr>

<td class="erw-nav-gruppe" style="white-space: nowrap;text-align: right;border: 1px solid transparent;border-top: 1px solid #FFF;border-bottom: 2px solid #FFF;padding: 0 1em;">Arbeitsentwürfe und Kandidaten

</td>

<a href="CCXML" title="CCXML">CCXML</a> | <a href="CURIE" title="CURIE">CURIE</a> | <a href="SMIL_Timesheets" title="SMIL Timesheets">SMIL Timesheets</a> | <a href="SXBL" title="SXBL">sXBL</a> | WICD | <a href="XFrames" title="XFrames">XFrames</a> | <a href="XML_Binding_Language" title="XML Binding Language">XBL</a> | XHTML+MathML+SVG | <a href="XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a>

</td></tr>

<tr>

<td class="erw-nav-gruppe" style="white-space: nowrap;text-align: right;border: 1px solid transparent;border-top: 1px solid #FFF;border-bottom: 2px solid #FFF;padding: 0 1em;">Anmerkungen

</td>

<a href="XAdES" title="XAdES">XAdES</a> | <a href="Extensible_Forms_Description_Language" title="Extensible Forms Description Language">XFDL</a> | <a href="XHTML%2BSMIL" title="XHTML+SMIL">XHTML+SMIL</a> | <a href="Extensible_User_Interface_Protocol" title="Extensible User Interface Protocol">XUP</a>

</td></tr>

<tr>

<td class="erw-nav-gruppe" style="white-space: nowrap;text-align: right;border: 1px solid transparent;border-top: 1px solid #FFF;border-bottom: 2px solid #FFF;padding: 0 1em;">Richtlinien

</td>

<a href="Web_Content_Accessibility_Guidelines" title="Web Content Accessibility Guidelines">Web Content Accessibility Guidelines</a> | Multimodal Interaction Activity | <a href="W3C_Markup_Validation_Service" title="W3C Markup Validation Service">Markup Validation Service</a>

</td></tr>

<tr>

<td class="erw-nav-gruppe" style="white-space: nowrap;text-align: right;border: 1px solid transparent;border-top: 1px solid #FFF;border-bottom: 2px solid #FFF;padding: 0 1em;">Initiativen

</td>

<a href="Web_Accessibility_Initiative" title="Web Accessibility Initiative">Web Accessibility Initiative</a>

</td></tr>

</tbody></table></div></div>

<div>

Normdaten (Sachbegriff): <a href="Gemeinsame_Normdatei" title="Gemeinsame Normdatei">GND</a>: <a rel="nofollow" class="external text" href="https://d-nb.info/gnd/4658480-8">4658480-8</a> </div>

</div></div></div><div><div class="zim-footer">

Dieser Artikel wurde von <a class="external text" title="Zuletzt bearbeitet am 2025-12-25" href="https://de.wikipedia.org/wiki/?title=Scalable_Vector_Graphics&oldid=262710851">Wikipedia</a> herausgegeben. Der Text ist unter <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de">Creative Commons Attribution-Share Alike 4.0</a> verfügbar, sofern nicht anders angegeben. Für die Mediendateien können zusätzliche Bedingungen gelten.

</div>

</div></div>

</div>

</main>

</div>

</body></html>